如何回到以前的路由在反应路由器-多姆 v6

Try this approach

import { useNavigate } from 'react-router-dom';


function YourApp() {
const navigate = useNavigate();


return (
<>
<button onClick={() => navigate(-1)}>go back</button>
</>
);
}

in V6,

import { useNavigate } from 'react-router-dom';
 

function App() {
const navigate = useNavigate();
 

return (
<>
<button onClick={() => navigate(-2)}>Go 2 pages back</button>
<button onClick={() => navigate(-1)}>Go back</button>
<button onClick={() => navigate(1)}>Go forward</button>
<button onClick={() => navigate(2)}>Go 2 pages forward</button>
</>
);
}

In old versions of react-router-dom there exists functions pop

you can reach them like:

const history = useHistory();
history.pop()

now in v6 you can use function useNavigate

const navigate = useNavigate();
navigate(-1) // you will go one page back
navigate(-2) // you will go two pages back

There is another way using a delta (number) in react-router Links v6 :

const BackButton = () => {
return (
<Link to={-1}>
Back
</Link>
);
};

Unfortunately there is a type error in typescript, Link component does not accept numbers, but still it works.

Just in case anyone gets here like I did trying to navigate back OR navigate somewhere else if you can't navigate back (e.g. link opened in new tab), there doesn't seem to be any way of verifying the history with react-router in v6. However it seems you can access window.history.state which has an idx property that is zero if you're at the start of the history stack.

It's possible there are some gotchas around it that I haven't hit up against, but it's working for me:

import { useNavigate } from 'react-router-dom';


// ...


const navigate = useNavigate();


// ...


if (window.history.state && window.history.state.idx > 0) {
navigate(-1);
} else {
navigate('/', { replace: true }); // the current entry in the history stack will be replaced with the new one with { replace: true }
}

If you want to navigate back or else where you can try this:

 <button onClick={() => navigate(-1) || navigate('/dashboard')}>
Go back or Dashboard
</button>

import { useEffect } from "react";
import {useNavigate } from "react-router-dom";// react-router-dom v6 version


const SecondComponent = () =>{
const navigate = useNavigate();
  

useEffect(() => {
navigate('/secondComponent')
},[]);


// note: we must have to to provide path like this one
/*
<Routes>
<Route path="/" element={<FirstComponent/>} />
<Route path="/secondComponent" element={<SecondComponent />} />
</Routes>
*/


return(
<>
<h2 >this is Second page</h2>
</>
)
}


export  default SecondComponent;