I am using react router. Assume I am in /dashboard route.
Now if I refresh the page, request will go to the server. And server redirects to /. What happens here is, I am navigated to / route, instead of /dashboard.
What I want is, When I refresh the page, I want to navigate to the same route instead of navigating to /.
Can anyone help me in resolving this issue?
Sorry this is my production server configuration issue
we are redirecting "/" from the server for all get routes instead of sending the "index.html" file.
Related
I'm new to React and Next.js, but after following the doc of dynamic routes I've successfully created a subpage catching all routes, and beeing able to get that on the server side. see the image:
My problem is that I'd like to have this behaviour from my index.tsx page, to be able to catch everthing on the home page and get the full url. What I've done is rename my index.tsx to [...].tsx and it redirects well to the home page no matter the route. The issue by doing that is my function getServerSideProps is called twice and I've no ideas why.
How should I do to be able to catch every routes from my homepage and get the complete url ?
Thank you !
I've found that there is nothing wrong with the code, my issue was a chrome extension.
I've now a page page/[...alias].tsx catching all routes with no problems :).
I am serving a production build index.html of react from an Express server. The react app uses react router for navigating. When using react router, there is a problem that when refreshing the page, it can not get the data anymore because it is sending GET request to http://example.com/abc and that URL is not handled in express. So I found the solution by handling every get request: app.get('*') to redirect back to the home page so the page can get all the resources it need. However, I have other end points in express that can send data to the front-end and if I redirect all GET request that end points does not work anymore. How should I solve this ?
So I found the answer by moving the app.get('*') below any other GET end points
I just can't seem to access URLs to the server or backend once my react-router has been loaded. I can curl the requests like so to https://produktivv.com/api/testme - the same goes if you access this link without visiting the home page.
Basically, as soon as React is loaded in to the browser, it handles all URLs from there on in. Have even set up a reverse proxy, still no luck. It's a React thing.
All is working with axios requests to the server, I just can't seem to access it from the browser.
I am trying to learn react router 4 but meet some problems. I follow the guide from here https://reacttraining.com/react-router/web/example/no-match, and yes this example works fine in my browser. I can click the links and get things shown in the browser.
but, if I type in the url in the browser instead of click the links, the page shows NOT FOUND
NOT FOUND page
What's happening? Does React-router can only use links instead of typing in URL??
Stijn de Witt explain about this "problem" here: https://stackoverflow.com/a/36623117/8272354
When you initialize with the URL in the "inital route" of your route system, all the routes "know" how to deal with Router Links. So, the React Link does't refresh the browser, just change the route internally in javascript and load the specifyc route. This way everything works fine.
But, when you type the route (not the "initial route") directly in the URL, the router system does't understand that route, and the browser will try get this page in the server.
I am using React and React-router in my SPA. When user navigates from one view to another, URL gets appended with hash (e.g #/broker/5e1f75c6-5a62-4d60-860c-1dd0d5ff8644?_k=w5wn3g) and this is expected and works fine for all views.
However when user refreshes page on any view, I want React-router to redirect to Index Route irrespective of view the user in. Is there any configuration I can do in React-router to setup this?
Right now React-router tries to navigate to matching route view. I just want to redirect to Index route/index.html without any server side redirects. Any suggestions ?
You can use the replace (or push) function of react-router. Call your history singleton's replace method after you set up the history.
Example
import { hashHistory } from 'react-router';
hashHistory.replace('/');
References
https://github.com/reactjs/react-router/blob/master/docs/API.md