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
Related
I'm new in react app development, I just build my practice app and deployed it through Netlify. I can visit my app and everything is fine till I refresh my window. Refreshing the window comes with an error page not found. what should I do to solve this problem?
You may need to look at providing a _redirects file in your root directory. See https://docs.netlify.com/routing/redirects/
For example,
/* /index.html 200
As cra is single page application, you need server setting to redirect everytime to index.html,
You might want to check this link
https://www.netlify.com/blog/2020/04/07/creating-better-more-predictable-redirect-rules-for-spas/
How is routing handled in a built react app?
Specifically, in a development environment, we can simply hit <host>:<port>/<some-path> and the corresponding component is loaded, but once the app is built, we get a bunch of static files and single index.html file, which are then served by some server.
Now, upon hitting the url <server-host>:<server-port>, the app works as intended, but upon entering the path, say <server-host>:<server-port>/<component-path>, a 404 error is returned.
If there is, say a button, upon clicking which, the same /<component-path> is to be redirected, the app works, but then again upon refreshing that page, 404 error occurs.
How can this be solved? What is the correct way to serve such apps having many components at different routes?
approach1:(recommended)
In server config you should point all urls ( http://ipaddress:port/<* any url pattern>) to index.html of react-app . this is known as fallback-mechanism.
And when any request comes,index.html of React app will take care of that automatically because it is single page application.
approach2:
Use HashRouter in React app. So You will not have to configure anything.
Depending on which server you are deploying to, you should redirect all errors to the index.html look for the configuration maybe htaccess or for example if it an AWS S3 bucket you just specify the error page to the same index.html file that is served. Then you handle actual error in your code using a routing library like maybe react-router-dom to take care of actual error. Your failure is because in normal circumstances in a static host when you provide a URL like <server-port>/<component-path> the assumption the server makes is that there is a folder with name component-path in your root directory which has an index file from where to load and display but in the case of React single page application, everything is managed by the index.html. So every request has to pass via the index.html
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
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.
I am working on angularjs project. Whenever I run my application on my local and refresh the page with url (ex. localhost:9000/online-order) other than base (ex. localhost:9000/), it is redirecting to home page ('/') but when i run my application on server and refresh the page with url (ex. order.posist.co/online-order) other than base (ex. order.posist.co), page crashes and giving 404 error.
for your reference you can check on http://order.posist.co
try with order.posist.co:9000/#/online-order
AngularJS is a single page app so you need "#" in your route how a redirect into the same page; other possibility is problem in the port or in the server, what server are your using?
if you are using grunt you need the command grunt build to generate the deploy folder