As the title suggests, Netlify fails to work properly with react-router-dom.
In RRD, when we specify a router, a link is created with that component under our specified URL. In the localhost, we can check the link. doesn't matter if we're navigating there by clicking a button, or just manually typing the URL in the search bar. it works for both. but one thing I noticed is, when I deploy the build folder on Netlify, the routed link stops working. yes, we can browse to that link by clicking a button on the main page or by some logical <Navigate/>. but if we manually type the routed URL in the search bar, Netlify shows the page doesn't exist. even if we reload the routed link after navigating there, it shows Page Not Found
Now I don't know if this issue is on all servers or if it's just Netlify. Because I use only Netlify.
Here's a demo link where you can check the behaviour
If you click "Go to Second page", it'll navigate you there smoothly. but try reloading Second Page or just manually typing out the URL in the search box
Any suggestion will be appreciated
[NOTE: I haven't attached any of my codes, as it's just a normal use of react-router-dom. but in case you think the solution is in the code, tell me in the comments. I'll edit the question and add em]
Related
So for my Assignment of MERN Stack, I am required to build a login/signup, home and profile page.
After authentication in the nav bar I have a profile opt that when on clicked navigates to "/profile". I have done this through useNavigate hook.
code for it
Also In my root file I have edited it such that when '/profile' is the exact path then the profile component is to be rendered.
code for apps.js
Until Now it works great. But when I open a new tab and give the path to /profile i.e I copy paste the same link "http://localhost:3000/profile" in a new tab then it keeps redirecting to the home page.
I have first tried switching between <Navigate and useNavigate() hook but it doesn't make a difference. Also it feels so counter-intutive for it to work like this.
How to correct this to make the website go directly into the profile page when opened in another tab?
PS: I am fairly new to React and MERN stack and also to this platform
I'm having a issue with opening a specific page for a react app. There is a home page and a new home re-design page and whenever I run Npm start it always opens the original home page instead of the new home re-design page. I attached a screenshot of my vscode for the specific page I want to open underlined in green. Thank you!
I tried everything including deleting the original home page but my fixes are ineffective at getting the home re-design page to open.
i am using Nextjs as react framework for my ecommerce website. My product detail page have an custom back button which is having Router.back() function. This works normal when browsing back and forth in website. But whenever i copy the product detail link and open directly in incognito mode the custom back button won't work...!!
Anyone have solution for this ?
I have a simple react app, to get to this app, a user clicks an anchor tag from another page. This is . Let's say this page is http://localhost/index.html
It redirects fine to the react app. Let's say it's on http://localhost/react/simple_app. In this react app, I use React Router, which has a catch all if none of the route matches. It will simply render text "Page Not Found".
When I click back button to get to index.html, both Chrome and Firefox will reload simple_app, WITH the url set to http://localhost/index.html. Obviously this will make simple_app to render "Page Not Found", as the route http://localhost/index.html is not defined in its routes. Once that rendered, the browser will immediately renders the previous page. So on this action the user will see the correctly rendered previous page. Everything seems to be pretty minor so far, just a bit of a flicker when "Page Not Found" briefly rendered then it quickly re renders index.html.
What is not fine is, if I then press "Forward" page on the browser, it will NOT re-render simple_app again. It will simply shows "Page Not Found". My suspicion on this is because briefly it has rendered it prior to moving "backwards" (with the wrong URL), hence browser will load it from cache.
Tried on firefox and chrome, with reactjs. Although this behaviour can be replicated with any JS, but specifically problematic with react router.
Also tried, if I type in the url http://localhost/simple_app, if i click back, it won't do the funky reloading with the wrong URL.
Not sure if any good solution to prevent this from happening.
To help everyone who got here looking for an answer, after a bit of digging and a bit of luck, I found the issue rooted in a library (ruby gem) we used called turbolinks. https://github.com/turbolinks/turbolinks.
This gem, injects javascripts which intercepts various navigation API such as anchor tag and browser back and forward so that it can make as our native application behaves like a Single Page App (without reloads).
So if you encountered similar behaviour, you may not be using Ruby, but check if you are using library that behaves similar to Ruby's Turbolinks. Hope this helps.
I have a react single page application, so on pressing back button, its redirecting me to welcome page as expected. Now due to some requirement, I have to update the URL of the app in between and due to which if now I press back button, its first redirect me to old url page and then welcome page.
How can I control this behavior, means even after updating the URL, user should directly redirected to welcome page on pressing back button.
I think you can make use of react-router-dom here. There is Link element available in react-router-dom which can solve your problem.
For eg:, you can try something like this
<Link to="/welcomePage" >Back</Link>
For more information, go through below document react-router-dom document
I don't know how to do it using react router, but you can use window.history.pushState() to solve your problem. In your third component add the following code into the render() method.
window.history.pushState(null, null, '/your-welcome-page-url');
It will change the current url to welcome page url without reloading the page; and when you will press the browser back button, the browser will be redirected to welcome page.