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?
Related
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?
For example i have a page /profile on there, the user isshowed his profile picture. When the respected user clicks on it, it changes to /profile/avatar. But, i dont want to change the page but show a component which otherwise will not be shown in /profile. Think of it as when you click on another's avatar in twitter, it changes to /#elonmusk/pfp a modal shows the image but it doesnt unmount the previous page
How can i implement that?
So I'm using most recent react-router and i have two pages. On the first one I select id and after pressing the button I get redirected to '/user/:id' endpoint. How can I store the state of the previous page. For example I press back button in my browser and I want to get back to the page with the user id selected in the form. Can I do it without using redux? Is there something for that inside react router?
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 was trying to understand how we can maintain the previous data when jump to another URL and come back again.
I have a single page application, let's say page1, where I have a search field and search result. There are come external links in the search data and if user clicks to that links, URL changes and user goes to different page. How can I maintain the same result data when the user wants to come back to the previous result page by hitting browser's back button?
Make sure all you need for a page to be displayed in a given state is part of its URL. Let's take your example:
Search page. Initially empty. URL = /cars
You fill the search form and press the search button. This navigates to URL /cars?color=blue&year=2015. Going to this URL changes the route, and the route searches the cars and displays them in the page.
You click on a car. This navigates to URL /cars/12345. Going to this URL changes the route, and the route loads the car 12345 and displays it in the page.
You press the back button. This navigates back to URL `/cars?color=blue&year=2015. Going to this URL changes the route, and the route searches the cars and display them in the page, again.
In short, your app should work the same way as if it was not a single-page app, and if the server used the URL to generate a HTML page dynamically.