I can go to my root route, navigate using links within the app, but when I go directly to or refresh a non-root route (in production only) I get the following error:
Failed to load resource: the server responded with a status of 404 (Not Found)
I have a project set up with ReactRouter v5.0.1.
I am using BrowserRouter wrapper, I don't want to use HashRouter because of URLs looking nice.
When I refresh or go to a path that is not a root route (eg: ____/user/article):
in local, it works as expected
in production (Heroku), it gives a Cannot get /user/article
I have looked up the issue and the solutions I found were to change my webpack.js:
add historyApiFallback: true to devServer
add publicPath:'/' to output
These have been unable to solve my issue.
My frontend client is inside my nodejs "app" where the built files are served up by an express server. Maybe this may affect my refresh?
Help would be greatly appreciated...
This is a client vs server side routing issue. When navigating around on front end, it's all client side routing. But when you refresh the page, it does a request to the back end with that route. So in your express server, you need a catch all route, defined after all other routes, that redirects them to the root path /, e.g.
app.get('*', function(req, res) { /* redirect to / here */ });
There's a bunch of posts about this already if you want some more in depth exploration of the issue, like this one
Related
I've created a website using create-react-app and react router. I am able to load the website from https://www.example.com/reactapp but I get a 404 error when I try to access a page like https://www.example.com/reactapp/somePage
The website is running on port 8080, https connection is working, inside my package.json I've defined my homepage as: "https://example.net/reactapp". In my BrowserRouter I've defined my basename as "/reactapp" and links are working and loading the pages just fine.
The thing also is that https://example.net/ displays a wordpress website, when I try to access https://www.example.net/reactapp/somePage I get a 404 error from the wordpress website. How can I properly fetch data when calling for a specific page?
Redirect all requests coming to the server to index.html
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
I have a problem with my front-end in Reactjs(my back-end is in Laravel).
When I reload a pages, I have this error "Sorry, the page you are looking for could not be found."
I don't know why and how resolve this.
It's in my Router ?
Thanks for your help
You should have a configuration file respective to laravel for redirecting all the routes to index.html file.
The issue is that since you have react router which is an application's internal route, server thinks it as an external application path. So you should have a router forwarding configuration to serve index.html irrespective of the route.
In IIS it is done using web.config file.
I have an angular app that uses routes, where it has .otherwise(){} in routes.js file and now I need to make custom error pages using nginx, how to stop the .otherwise(){} and use the error pages defined on nginx default file, Anyone Please help I'm working on it from 5hrs. Or point me to any link that explains and solves this problem.
"Otherwise" in the routing is looking for a client side route. You can probably direct otherwise to a separate route on the client side with a controller that automatically redirects to a server route.
.otherwise('/ControllerThatSendsToServer');
Then in the ControllerThatSendsToServer just do a window.location = 'server error page';
When I refresh the page on some url like "page/sub/url/" I get an error because this is send to the server and not to the bundle in index.html. From here I understand that it is possible to configure the server to just ignore such request and serve index.html. No problem here. However, in such case after refresh the user gets the default Indexroute, for example: "/" instead "page/sub/url/" where he requested the refresh initialy. Is there a way to send the "page/sub/url/" to the bundle.js and route the user to this location after he refreshed the page?
OMG .. that was just super easy. Once i defined the routes on the server side and directed them to index.html the pages reloaded normaly without any errors. Begginers mistake.