The image is above ^^^
When I click on the link I see that the path is correct but when I try to redirect to that page it sends me back to the home page. I tried going to the route manually and it reroutes me to home. Why is my page not rendering?
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 wondering if it is possible to store multiple browser histories, one for each section of the page.
Let's say I have the following routes: /home, /profile. And inside /profile I can go to /profile/edit.
So if I navigate to /home, then /profile, then to /profile/edit and then I press the back button (or navigate(-1)), it works fine and returns me to /profile.
PROBLEM:
If I navigate to /home, then /profile, then /profile/edit, then /home, then /profile/edit again and hit the back button it will send me to /home, as it is the last route on the history. However the desired functionality would be that it returns me to /profile, as it is the last route on the profile-history.
In this way, I would like to have independent histories for home and profile. Any possible solution?
I have multiple user cards when I click on the specific user it navigates to the user detail. but on the next page, it's showing half of the page or the end of the page. Not showing the top of the page. It's problem in react-router v6.
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.
I'm new to react router and currently implementing a page with navigation.
The top part is navigation followed by content part.
Currently when someone clicks on localhost:8080/page it renders a component in the content part.
On click on one of the nav items page redirects to localhost:8080/page#my-anchor also the content below renders another component.
When clicking back button, the URL changes to localhost:8080/page but the content doesn't get updated.
How to handle the update of content with browser back & forward buttons?