After deploying my React app in Netlify, when I refresh my base url's page, it works, but when I refresh other routes, the app crashes.
I want the browser to load the specific route's contents after refreshing the page.
Related
The Problem:
We have our website https://website.com and we are trying to deploy a react router application to https://website.com/react-app. Routing works fine if the user first navigates to https://website.com/react-app and then navigates around the app from there. However, if someone navigates to https://website.com/react-app/home directly (or via bookmark) they get a 404 even though /home is one of our routes.
What We tried:
In our package.json we have the "homepage": "/react-app/" set. Using BrowserRouter we set the basename prop to /react-app and the app works when deployed except for 404 when navigating directly to a nested route. We have heard that HashRouter can be useful in this situation, however, when we use HashRouter we are getting https://website.com/react-app#/ instead of https://website.com/react-app/#/.
How can we configure this to allow users to navigate directly to nested routes in our React Router application deployed to a the /react-app Subfolder on our server?
React: 17.0.2, React-Router-Dom: 5.2.0
I think the problem must be not connected with React. Your React app is configured right. Check the configuration of your web server. Your webserver must return index.html with React application when the user navigates to any page.
I have a url with paramenters in my react routes.
I can access the route via {Link} from react router dom as shown below. The page loads upon button click.
However when I refresh the page or try to access the URL via the address bar, I get a blank page and this error message
It works fine locally but the blank page comes up in production. I am hosting the website on heroku.
The best way to handle it is to add a base tag in your index.html.
<base href="/" />
I fixed the problem using the solution in the link below. I initially set my homepage to "." in my package.json and eventually changed it to my app domain
https://stackoverflow.com/a/66950806/6542175
I have problem with my app on heroku
https://quiet-meadow-74770.herokuapp.com/
When I click register and refresh page, I have a error.
What should I do?
I have a react app created with the create-react-app template and want it be deployed on IIS as a part of another application folder.
On client navigation after loading the navigated component is loaded but when i refresh the url from the browser i get a 404 error
For example:
i build using npm run build with package.json
I have also set the base name to the Router component
on open of the react site and navigation to the component "Admin" it shows the component properly. But when i reload the same url by refreshing from the browser refresh button i get an 404 error page not found.
When i run using the npm start it runs with http://localhost:3000/ as default and on component navigation changes the url to http://localhost:3000/admin . here if i refresh from the browser it loads the page and navigates properly showing the navigated component.
What am i missing to make this work ?
I have a react app that's hosted on AWS Cloudfront, and the default root is set to index.html, which loads the react app.
So far so good.
I created a new html page page1.html, and then tried accessing it using the full URL, https://my.site.com/page1.html.
Uh oh.
The React app is loaded, and it's router intercepted the URL, and displayed the page not found error. React has no knowledge of the html page, which sounds about right.
If the cache is cleared the page1.html file loads correctly, however as soon as the react app is loaded, the react router starts intercepting the page1.html URL.
Why is that? I kind of expected the direct URL to load the html file bypassing the react app.
And is there a way to add an exception in react router to allow the page to be loaded without being intercepted?