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 :).
Related
I'm trying to deploy my small react app, but every time I logged in and refresh the page, the 404 file not found appears. I'm using local storage to save the data of the current user. Can someone explain what I'm doing wrong and how to fixed these.
These is my repository https://github.com/GabrielDelaPena/expenses_tracker.
If you are using React router, then you can solve this issue by using HashRouter instead of BrowserRouter.
For more knowledge on this, you can refer to this thread:
React-router urls don't work when refreshing or writing manually
Ok, I have a project and in the past I made a koa SPA (using koa-static) because I needed it to run the page on heroku, the thing is that now I have react-router in my page and it works half fine. For example using the buttons that I have in the page that have the Link component (aka the component that react router uses to send the user to another route) works fine, and at the same time it changes the url, the thing that doesn't work is when I try to refresh the page/go back(for example if I was on route "/path" and now I am on "/" and I want to go back using the browser buttons it doesnt work)/introduce the url manually in the browser it doesnt work, koa just says Not found and that's because koa doesnt know that those paths are routes in the app rather than actual files/folders.
My question is, how can I make koa work with react router or how can I somehow make react router not change the paths in the url or idk something like that.
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.
I'm working on a project and I have two components called home , about components.
When I'm on the home component and I'm going to the about component everything all right
but When I'm on the about component and Reload the page again error not found(404).
what?
The problem is, on your first load (at home component), client receive the whole ReactJS App and the routing from that point will be handled by ReactJS App (client routing). In your second case, you are at the about (component) and reload the app, the request send to the server like .../about and no route on server match it then it returns 404.
P/S: Follow along with Next official tutorial, you will face that case and they explain quite clear about it.
https://nextjs.org/learn/basics/getting-started
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.