This question already has answers here:
React Router not working with Github Pages
(4 answers)
Closed 9 months ago.
Routing of the app
Json package
i can't figure out why it's not rendering anything and shows 404 page if i manually navigate to other page
I had same problem once, The problem was that my webserver was serving "index.html" only for the root route ("/")
I configured the webserver in a way that all the routes (or only the ones that you are using) will serve index.hml. Please try to check this.
Based on the screenshot provided, it appears that the project https://packirisamykaran.github.io/daily-thoughts is hosted using GitHub pages. React Router can be used, but you would have to switch to hashHistory instead of browserHistory so that it works with GitHub Pages.
The Notes on client-side routing from the create-react-app.dev website basically provide two options as workarounds:
You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to hashHistory for this effect, but the URL will be longer and more verbose (for example, http://user.github.io/todomvc/#/todos/42?_k=yknaj). Read more about different history implementations in React Router.
Alternatively, you can use a trick to teach GitHub Pages to handle 404s by redirecting to your index.html page with a custom redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you’ll need to add code handling the redirect parameter to index.html. You can find a detailed explanation of this technique in this guide.
Thanks to #DrewReese, for clarifying this.
Related
I haven't found any documentation on this behavior but here it goes...
Basically I have established an index.js page and a dynamic [address].js page.
Problem I'm facing here is that whenever I visit the [address].js page with something like "/helloworld" as an endpoint, I get redirected to index.js when I fully expected the contents of [address].js to show.
This is only happening after deployment to firebase hosting and not happening in localhost environment.
As a workaround, I added this code snippet to the useEffect method on index.js to route back to [address].js everytime I get redirected to index.js. This feels very inefficient.
const path = router.asPath;
if (
path &&
(path !== "/[address]")
) {
Router.push(`${path}`);
}
Here to provide some clarity and understanding around the problem.
It turns out that my issue with dynamic routing has nothing to do with NextJS and more to do with static hosting of sites on the firebase platform.
Here's an article that helps to cover this concern about dynamic routes on firebase hosting: https://medium.com/hackernoon/firebase-to-the-rescue-dynamic-routing-via-hosting-functions-integration-aef888ddf311
I made a website with React and I used react router for routing, my problem is:
When on a non route page the browser is refreshed, I got the hostgator standard 404 page.
I know why is that and I looking for a solution like at netlify.
At netlify I can use a file named _redericets and the problem is solved.
while hosting react web page on GitHub pages it shows only white pages even though I used the instruction on the deployment of react page on Github.
I think it is due to the react-router-dom (Switch and route ) methods I used to redirect to its page. please give me a solution regarding this.
I tried to edit the package.json file but it not be solved and I also tried to push the file again to that repo branch
I am working on a gatsby hybrid app that has several client-only routes with dynamic server data.
Strangely when navigating to one of the client-only routes at I am getting the 404 page and the message that there is no page found.
Visiting the client-only URL directly, eg. mysite/auth/login works, and the issue only happens when using an internal Link component or navigate('/auth/login').
I am using the gatsby-plugin-create-client-paths setup
and Router component to handle the client-routing
I am have tried different approaches but couldn't figure out why I am being redirected to the 404 page.
The issue happens only on the inial page visit. Once the page has been loaded internal navigation works without errors and also only happens in development mode. The production build works just fine.
Any ideas what could cause this behavior??
I guess you are using reach router navigate.
If thats the case, try and use navigate from gatsby.
import { navigate } from 'gatsby'
Similar issue exists in the "simple-auth" example in Gatsby git repository. After initial startup by running yarn develop at background, the click on 'log in' will go to Gatsby development 404 page.
The reason behind this is this example, and quite a lot demo around blog spots use the "Link" from #reach/react, which normally doesn't handle SSG or static routing thing, but "Link" from gatsby knows very well how to handle these.
So, the fix is:
to replace // import { Link } from "#reach/router" with import { Link } from "gatsby".
The problem: When i go to any internal root, and press f5, it broke, givin 404. Like for example:
https://josuevalrob.github.io/jeval-web/sign-in. But if I go to the root it works fine: https://josuevalrob.github.io/jeval-web
I don't know how to solve this problem. There is a bunch of documentation about this, and I cant handle it.
This is the github repo: https://github.com/josuevalrob/jeval-web
This is the github Page: https://josuevalrob.github.io/jeval-web
And you can see, the package json have the home key:
"homepage": "https://josuevalrob.github.io/jeval-web",
Also the .env is currently empty, but i can add this:
PUBLIC_URL = "https://josuevalrob.github.io/jeval-web"
Nevertheless, it doesn't work.
I had added the homepage or the public_url, neither work.
Github pages doesn't really support single page applications. Single page applications require a server that serves the same page at every url and then the client renders the appropriate content based on the url. Hence the "single page". Github does not allow you to run server side code, so you can't write a server to serve your index.html at every route.
There is, however, a hack you can use to make this work. When you navigate to a route other than the root url, Github will serve a 404 page as you can see. Github allows you to customize this 404 page. So, you can make the custom 404 page your single page application and then it will be served at every route as required.
This repo explains the required steps to serve your single page as a custom 404 page on Github pages.
Basically it amounts to...
Copy this 404.html page to your repo as is
Add this redirect script to your index.html page
The only drawback is that the url is forced to redirect and quickly flashes the incorrect URL before redirecting. You can see an example of this by refreshing this page. If you want to avoid this, you need to look for hosting somewhere else that allows you to edit server side code and serve your index.html at every route
I had a similar issue with react app. I fixed it by using HashRouter instead of BrowserRouter in App component