Menu
I am using react-router in a SPA.
In my case,
the browser history is /home => /somepage1 => /another => /changepassword
when I do some thing in the route /changepassword, I wanna go to the /login route, and clear all the previous browser history and make this route /login the 1st in the history.
How can I achieve this?
357
push(`/route`); This will clear the history and change for a new one.
Show activity on this post. import {useHistory } from "react-router-dom"; const TheContext = React. createContext(null); const App = () => { const history = useHistory(); <TheContext.
push() in React Router V4. Version 4 of React Router doesn't include a useHistory hook, so you'll have to pass down the history object via props . This is also the only way to access history in Class Components, which aren't compatible with hooks.
React Router uses the history package, which builds on the browser history API to provide an interface to which we can use easily in React apps. The history object has the following properties and methods: length - (number) The number of entries in the history stack.
In this article, we’ll look at how to get the browser history object with React Router. We can get the history with React Royer by calling the createBrowserHistory method. For instance, we can write:
How to stop /#/ in browser with react-router? Any way to prevent /#/ from showing in the browser's address bar when using react-router? That's with ReactJS. i.e. Clicking on links to go to a new route shows localhost:3000/#/ or localhost:3000/#/about. Depending on the route. It's due to using HashHistory i.s.o. BrowserHistory.
Michael Jackson, the author of react-router, posted this answer regarding Reset/clear history: There's no way for us to programmatically reset the history stack (at least in a browser, in memory history this would be trivial).
Get History on react-router We can get the history with React Royer by calling the createBrowserHistory method. For instance, we can write: import { Router } from 'react-router-dom' import { createBrowserHistory } from 'history' import App from './App' const history = createBrowserHistory ({ //...
My App is loaded in a new browser window, thus I'm certain the app will have a clean browser history, so I can use this to get back to the first page in the browser history:
props.history.go(-(props.history.length - 1))
If page you want to return to in the browser history was not at position 1, you can record the value of history.length at this Start page and then pass that number into this function when you're ready to go back to the Start page.
// loading start page…
const startPageIndex = props.history.length - 1
// later when ready to go back to start page…
props.history.go(-startPageIndex)
Note: When going back by using either of the above solutions, the "forward" history will still exist until the user navigates forward to create new history.
Use the <Memory Router> which "keeps the history of your “URL” in memory (does not read or write to the address bar)" for the flow of pages where you wish to replace the history… because it will not create a browser history.
Michael Jackson, the author of react-router, posted this answer regarding Reset/clear history:
There's no way for us to programmatically reset the history stack (at least in a browser, in memory history this would be trivial). If you need to clear the history stack for some reason, I'd suggest you use
window.location.reload().
Further from MDN:
There is no way to clear the session history or to disable the back/forward navigation from unprivileged code. The closest available solution is the location.replace() method, which replaces the current item of the session history with the provided URL.
136
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
