blocks|key|3121244|text|可以在componentWillReceiveProps生命周期方法中保存以前的路径。逻辑非常接近故障排除部分+of+react-router+docs中提供的示例。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3121245|<Route+component={App}>
++{/*+...+other+routes+*/}
</Route>

const+App+=+React.createClass({
++getInitialState()+{
++++return+{+prevPath:+''+}
++},

++componentWillReceiveProps(nextProps)+{
++++if+(nextProps.location+!==+this.props.location)+{
++++++this.setState({+prevPath:+this.props.location+})
++++}
++}
})|code-block|syntax|javascript|3121246|最近，从州访问它。|3121247|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/reactjs/react-router/blob/master/docs/Troubleshooting.md#getting-the-previous-location^0|3|P|1N|C|1D|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|13|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

You can save previous path in a <code>componentWillReceiveProps</code> lifecycle method. The logic is very close to the example provided in <a href="https://github.com/reactjs/react-router/blob/master/docs/Troubleshooting.md#getting-the-previous-location" rel="noreferrer">troubleshooting section</a> of <code>react-router</code> docs. 

<pre><code>&lt;Route component={App}&gt;
 {/* ... other routes */}
&lt;/Route&gt;

const App = React.createClass({
 getInitialState() {
 return { prevPath: '' }
 },

 componentWillReceiveProps(nextProps) {
 if (nextProps.location !== this.props.location) {
 this.setState({ prevPath: this.props.location })
 }
 }
})
</code></pre>

And lately, access it from the state.

blocks|key|2371633|text|如果您使用的是react-router-redux，您可以创建一个还原器，它可以连接到react+router分派的事件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2371634|export+default+function+routerLocations(state+=+[],+action)+{
++switch+(action.type)+{
++++case+"@@router/LOCATION_CHANGE":
++++++return+[...state,+action.payload]
++++default:
++++++return+state;
++}
}|code-block|syntax|javascript|2371635|entityMap^0|7|I|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

If you're using <code>react-router-redux</code> you can create a reducer which hooks into the events dispatched by react-router-redux.

<pre><code>export default function routerLocations(state = [], action) {
 switch (action.type) {
 case "@@router/LOCATION_CHANGE":
 return [...state, action.payload]
 default:
 return state;
 }
}
</code></pre>

blocks|key|2371648|text|您可以使用<Link>组件传递状态，在本例中为路径名：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2371649|<Link+to={{pathname:+'/nextpath',+state:+{+prevPath:+location.pathname+}}}>Example+Link</Link>|code-block|syntax|javascript|2371650|然后，您可以在下一个组件中从prevPath访问this.props.location.state。|2371651|entityMap^0|5|6|0|0|E|8|O|P|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

You can pass down state using the <code>&lt;Link&gt;</code> component, in this case a pathname:

<pre><code>&lt;Link to={{pathname: '/nextpath', state: { prevPath: location.pathname }}}&gt;Example Link&lt;/Link&gt;
</code></pre>

You can then access <code>prevPath</code> from <code>this.props.location.state</code> in the next component

blocks|key|3121325|text|如果使用的是<Redirect+/>组件，则可以添加一个from属性，该属性将添加到重定向到的组件中的location.state中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3121326|//+in+the+redirecting+component
<Redirect
to={{
++pathname:+'/login',
++state:+{+from:+location+}
}}
/>

//in+the+other+component+you+redirected+to
...
const+{+location+}+=+props.location.state;
...|code-block|syntax|javascript|3121327|entityMap^0|6|C|S|4|1F|E|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

If you are using the <code>&lt;Redirect /&gt;</code> component, you can add a <code>from</code> property that will be added into <code>location.state</code> in the component you redirects to.

<pre><code>// in the redirecting component
&lt;Redirect
to={{
 pathname: '/login',
 state: { from: location }
}}
/&gt;

//in the other component you redirected to
...
const { location } = props.location.state;
...
</code></pre>

blocks|key|2371702|text|使用useHistory+hook+of+react路由器在功能组件的无状态状态下转到前面的路径。有关更多信息，请访问链接https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/hooks.md#useroutematch|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2371703|import+{+useHistory+}+from+"react-router-dom";

function+demo+()+{
++++let+history+=+useHistory();
++++const+goToPreviousPath+=+()+=>+{
++++++++history.goBack()
++++}
++++return+(
++++++<div>
++++++++<Button
++++++++++onClick={goToPreviousPath}
++++++++>
++++++++++Back
++++++++</Button>
++++++</div>
++++):
}|code-block|syntax|javascript|2371704|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/hooks.md#useroutematch^0|2|A|L|8|1P|33|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

Use useHistory hook of react-router to go to the previous path in stateless of functional component. For more information follow the link <a href="https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/hooks.md#useroutematch" rel="noreferrer">https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/hooks.md#useroutematch</a>

<pre><code>import { useHistory } from "react-router-dom";

function demo () {
 let history = useHistory();
 const goToPreviousPath = () =&gt; {
 history.goBack()
 }
 return (
 &lt;div&gt;
 &lt;Button
 onClick={goToPreviousPath}
 &gt;
 Back
 &lt;/Button&gt;
 &lt;/div&gt;
 ):
}
</code></pre>

blocks|key|1722554|text|如果这是帮助，如果您不希望组件重新呈现并且仍然获得前面的路径，请参阅此解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1722555|location.js|offset|length|style|BOLD|1722556|import+{+useLocation+}+from+'react-router-dom';


export+default+()+=>+{
++const+location+=+useLocation();
++const+path+=+location.pathname;
++const+store+=+window.localStorage;
++let+url+=+'';
++let+prevUrl+=+'';

++url+=+store.getItem('url');
++store.setItem('prevUrl',+url);
++store.setItem('url',+path);

++url+=+store.getItem('url');
++prevUrl+=+store.getItem('prevUrl');

++return+{+url,+prevUrl+};

}|code-block|syntax|javascript|1722557|在其他文件中|1722558|import+Location+from+'./location.js'


const+{+url,+prevUrl+}+=+Location()|1722559|entityMap^0|0|0|B|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|Y|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

If it's help, see this solution if you don't want the component to re-render and still get the previous path..
location.js:
<pre><code>import { useLocation } from 'react-router-dom';


export default () =&gt; {
 const location = useLocation();
 const path = location.pathname;
 const store = window.localStorage;
 let url = '';
 let prevUrl = '';

 url = store.getItem('url');
 store.setItem('prevUrl', url);
 store.setItem('url', path);

 url = store.getItem('url');
 prevUrl = store.getItem('prevUrl');

 return { url, prevUrl };

}
</code></pre>
In other file
<pre><code>import Location from './location.js'


const { url, prevUrl } = Location()
</code></pre>

blocks|key|3121409|text|使用道具获取先前的路径|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3121410|console.log(props.history.location.state+&&+props.history.location.state.from.pathname);|code-block|syntax|javascript|3121411|如果您使用<Link>+OR+<Redirect>+?+pathname+:+undefined重定向|offset|length|style|CODE|3121412|entityMap^0|0|0|5|17|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

React - Get previous path using props

<pre><code>console.log(props.history.location.state &amp;&amp; props.history.location.state.from.pathname);
</code></pre>

if you redirect using <code>&lt;Link&gt; OR &lt;Redirect&gt; ? pathname : undefined</code>

blocks|key|2371763|text|与其检查前一页是什么，不如从另一个角度来处理问题。将当前页面作为支持传递到要导航到的组件或链接。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2371764|在我调用history.push或单击链接的上一页或组件中，我添加了当前页面的状态。|2371765|history.push(`/device/detail`,+{+from:+'device+detail+page'+}+);|code-block|syntax|javascript|2371766|然后，我可以使用history.location.state.from访问上一页的内容。|offset|length|style|CODE|2371767|entityMap^0|0|0|0|8|R|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@$K|U|L|V|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Instead of checking what the previous page is, approach the problem from a different angle. Pass the current page as props to the component or link that you're going to navigate to.
In the previous page or component that I'm calling history.push or clicking the link from, I add a state of the current page that I'm on e.g.
<pre><code>history.push(`/device/detail`, { from: 'device detail page' } );
</code></pre>
I can then access what the previous page was using <code>history.location.state.from</code>

blocks|key|3121465|text|使用context，您可以存储以前的location路径名：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3121466|const+RouterContext+=+React.createContext();

const+RouterProvider+=+({children})+=>+{
++const+location+=+useLocation()
++const+[route,+setRoute]+=+useState({+//-->+It+can+be+replaced+with+useRef+or+localStorage
++++to:+location.pathname,
++++from:+location.pathname+//-->+previous+pathname
++});

++useEffect(()=>+{
++++setRoute((prev)=>+({to:+location.pathname,+from:+prev.to})+)
++},+[location]);
++
++return+<RouterContext.Provider+value={route}>
++++{children}
++</RouterContext.Provider>
}|code-block|syntax|javascript|3121467|然后在RouterProvider下的某个组件中|3121468|const+route+=+useContext(RouterContext);
//...
<Link+to={route.from}>
++Go+Back
</Link>|3121469|或|3121470|history.push(route.from);|3121471|备注：RouterContext应该在Router组件下，如果您不想更新状态，可以使用useRef。如果您需要更多的持久性，请使用localStorage|BOLD|3121472|entityMap^0|2|7|I|8|0|0|3|E|0|0|0|0|0|2|3|D|J|6|17|6|1T|C|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|17|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|18|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|6|7|19|8|@$9|1A|A|1B|B|U]|$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|V|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|W|$]]

Using <code>context</code> you can store the previous <code>location</code> pathname:
<pre><code>const RouterContext = React.createContext();

const RouterProvider = ({children}) =&gt; {
 const location = useLocation()
 const [route, setRoute] = useState({ //--&gt; It can be replaced with useRef or localStorage
 to: location.pathname,
 from: location.pathname //--&gt; previous pathname
 });

 useEffect(()=&gt; {
 setRoute((prev)=&gt; ({to: location.pathname, from: prev.to}) )
 }, [location]);
 
 return &lt;RouterContext.Provider value={route}&gt;
 {children}
 &lt;/RouterContext.Provider&gt;
}
</code></pre>
Then in some component under <code>RouterProvider</code>:
<pre><code>const route = useContext(RouterContext);
//...
&lt;Link to={route.from}&gt;
 Go Back
&lt;/Link&gt;
</code></pre>
Or
<pre><code>history.push(route.from);
</code></pre>
Note: <code>RouterContext</code> should be under <code>Router</code> component and If you don't want to update the state you can use <code>useRef</code> instead. If you need more persistence use <code>localStorage</code>

blocks|key|3121500|text|这个答案使用了与@AlexandrLazarev类似的方法，但通过React实现了它。这将确保捕获对路径的所有更改，而不管它们是如何启动的。前面的path值存储在顶层组件的状态中，然后可以作为道具传递给子组件，或者如果您使用的是像Redux这样的全局状态提供程序，则可以将其添加到存储中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3121501|import+{+useEffect,+useState+}+from+'react'

cont+App+=+({+location+})+=>+{
++const+[currentPath,+setCurrentPath]+=+useState(null);
++const+[previousPath,+setPreviousPath]+=+useState(null);

++useEffect(()+=>+{
++++if+(location.pathname+!==+currentPath)+{
++++++setPreviousPath(currentPath);
++++++setCurrentPath(location.pathname);
++++}
++},+[location.pathname]);
}|code-block|syntax|javascript|3121502|标记中的实现类似于下面的代码片段。我一直在使用Reach路由器，但是考虑到它的被合并和React路由器，它也应该在那里工作。组件使它的所有子程序都可以使用location支柱，并在其pathname属性下保存当前路径的值。|offset|length|style|CODE|3121503|<Router>
++<App+path="/*"+/>
<Router/>|3121504|entityMap|0|LINK|mutability|MUTABLE|url|https://reacttraining.com/blog/reach-react-router-future/|1|https://reach.tech/router/api/Router^0|0|0|25|8|2J|8|13|3|0|1Q|2|1|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@$I|11|J|12|K|L]|$I|13|J|14|K|L]]|9|@$I|15|J|16|1|17]|$I|18|J|19|1|1A]]|A|$]]|$1|M|3|N|5|D|7|1B|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]]]

This answer uses a similar approach to @AlexandrLazarev, but implements it via React Hooks. This ensures that all changes to the path are captured regardless of how they are initiated. The previous path value is stored in the top level component's state which can then be passed down to children as props or if you're using a global state provider like Redux can be added to a store:
<pre class="lang-js prettyprint-override"><code>import { useEffect, useState } from 'react'

cont App = ({ location }) =&gt; {
 const [currentPath, setCurrentPath] = useState(null);
 const [previousPath, setPreviousPath] = useState(null);

 useEffect(() =&gt; {
 if (location.pathname !== currentPath) {
 setPreviousPath(currentPath);
 setCurrentPath(location.pathname);
 }
 }, [location.pathname]);
}
</code></pre>
The implementation in the markup would look something like the below snippet. I've been using Reach Router, but given that its <a href="https://reacttraining.com/blog/reach-react-router-future/" rel="nofollow noreferrer">been merged</a> with React Router it should work there as well. The <a href="https://reach.tech/router/api/Router" rel="nofollow noreferrer"><code>Router</code> component</a> makes the <code>location</code> prop available to all of its children and holds the value of the current path under its <code>pathname</code> attribute
<pre><code>&lt;Router&gt;
 &lt;App path=&quot;/*&quot; /&gt;
&lt;Router/&gt;
</code></pre>

blocks|key|1722706|text|我需要一种只有在前一条路径等于特定路由的情况下才有条件地导航的方法。有了一个功能组件，它就像这样工作了。只有在路由是&&的情况下，.push()才会触发'/cart'方法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1722707|import+{useHistory}+from+"react-router-dom";

const+history+=+useHistory();

history.location.pathname+===+'/cart'+&&+history.push('/checkout');|code-block|syntax|javascript|1722708|entityMap^0|1M|2|1T|7|24|7|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

I needed a way to conditionally navigate only if previous path equals a specific route. With a functional component it worked out like this. The <code>&amp;&amp;</code> will fire the <code>.push()</code> method only if route is <code>'/cart'</code>.
<pre><code>import {useHistory} from &quot;react-router-dom&quot;;

const history = useHistory();

history.location.pathname === '/cart' &amp;&amp; history.push('/checkout');
</code></pre>

blocks|key|1722719|text|您可以使用history.listen侦听并构建后台堆栈。这里有个钩子就是这样做的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1722720|import+{+Location+}+from+'history';
import+{+useEffect,+useState+}+from+'react';
import+{+useHistory+}+from+'react-router';

const+useBrowserBackStack+=+()+=>+{
++const+history+=+useHistory();
++const+[backStack,+setBackStack]+=+useState<Location[]>([]);
++useEffect(()+=>+{
++++history.listen((location,+action)+=>+{
++++++setBackStack(backStack+=>+{
++++++++switch+(action)+{
++++++++++case+'POP':
++++++++++++return+backStack.slice(0,+backStack.length+-+1);
++++++++++case+'PUSH':
++++++++++++return+[...backStack,+location];
++++++++++case+'REPLACE':
++++++++++++return+[...backStack.slice(0,+backStack.length+-+1),+location];
++++++++}
++++++});
++++});
++},+[setBackStack,+history]);
++return+backStack;
};

export+default+useBrowserBackStack;|code-block|syntax|javascript|1722721|然后在顶级组件中使用，如下所示|1722722|const+backStack+=+useBrowserBackStack();|1722723|entityMap^0|5|E|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

You could listen and build a back stack using <code>history.listen</code>. Here's a hook that does just that.
<pre class="lang-js prettyprint-override"><code>import { Location } from 'history';
import { useEffect, useState } from 'react';
import { useHistory } from 'react-router';

const useBrowserBackStack = () =&gt; {
 const history = useHistory();
 const [backStack, setBackStack] = useState&lt;Location[]&gt;([]);
 useEffect(() =&gt; {
 history.listen((location, action) =&gt; {
 setBackStack(backStack =&gt; {
 switch (action) {
 case 'POP':
 return backStack.slice(0, backStack.length - 1);
 case 'PUSH':
 return [...backStack, location];
 case 'REPLACE':
 return [...backStack.slice(0, backStack.length - 1), location];
 }
 });
 });
 }, [setBackStack, history]);
 return backStack;
};

export default useBrowserBackStack;
</code></pre>
Then use in your top level component like this
<pre class="lang-js prettyprint-override"><code>const backStack = useBrowserBackStack();
</code></pre>

blocks|key|2371883|text|对于那些研究如何向后或向前导航到react-router-v6+n页面的人，您可以使用useNavigate+API，|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|2371884|import+{useNavigate}+from+'react-router-dom'

const+navigate+=+useNavigate()|code-block|syntax|javascript|2371885|然后，您可以将一个函数传递给按钮上的onClick事件。|2371886|<button+onClick={()+=>+navigate(-1)}>Previous</button>|2371887|注意，负整数表示向后，正整数表示向前。|2371888|要进一步阅读，请查看docs：https://reactrouter.com/docs/en/v6/upgrading/v5#use-usenavigate-instead-of-usehistory|2371889|entityMap|0|LINK|mutability|MUTABLE|url|https://reactrouter.com/docs/en/v6/upgrading/v5#use-usenavigate-instead-of-usehistory^0|G|F|17|B|0|0|I|7|0|0|0|F|2D|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|D]]|E|@]|F|$]]|$1|G|3|H|5|I|7|16|8|@]|E|@]|F|$J|K]]|$1|L|3|M|5|6|7|17|8|@$9|18|A|19|B|D]]|E|@]|F|$]]|$1|N|3|O|5|I|7|1A|8|@]|E|@]|F|$J|K]]|$1|P|3|Q|5|6|7|1B|8|@]|E|@]|F|$]]|$1|R|3|S|5|6|7|1C|8|@]|E|@$9|1D|A|1E|1|1F]]|F|$]]|$1|T|3|-4|5|6|7|1G|8|@]|E|@]|F|$]]]|U|$V|$5|W|X|Y|F|$Z|10]]]]

For those looking how to navigate to n pages backwards or forwards,
with react-router-v6 you can use the <code>useNavigate</code> API,
<pre><code>import {useNavigate} from 'react-router-dom'

const navigate = useNavigate()
</code></pre>
Then you can pass a function to an <code>onClick</code> event on a button for example
<pre><code>&lt;button onClick={() =&gt; navigate(-1)}&gt;Previous&lt;/button&gt;
</code></pre>
note that negative integers are for backwards and positive for forwards.
For further reading, check out the docs : <a href="https://reactrouter.com/docs/en/v6/upgrading/v5#use-usenavigate-instead-of-usehistory" rel="nofollow noreferrer">https://reactrouter.com/docs/en/v6/upgrading/v5#use-usenavigate-instead-of-usehistory</a>

blocks|key|1722745|text|从08/2022年起，对于使用React路由器v6的用户，可以使用导航组件、链接组件或useNavigate钩子将先前的url传递给下一个组件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1722746|在重定向部分中：|1722747|//+with+Navigate+component+(same+as+with+Link+component):
const+location+=+useLocation();
...
<Navigate+to="/nextpath"+state={+{+from:+location+}+}+/>
...


//+with+useNavigate+hook:
const+navigate+=+useNavigate();
const+location+=+useLocation();
....
navigate("/nextpath",+{+state:+{+from:+location+}+});
...|code-block|syntax|javascript|1722748|在重定向到的组件中：|1722749|...
const+location+=+useLocation();
let+from+=+location.state?.from?.pathname;
...|1722750|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

As of 08/2022, for those using React Router v6, you can either use Navigate component, Link component or useNavigate hook to pass the previous url to the next component:
In the redirecting component:
<pre><code>// with Navigate component (same as with Link component):
const location = useLocation();
...
&lt;Navigate to=&quot;/nextpath&quot; state={ { from: location } } /&gt;
...


// with useNavigate hook:
const navigate = useNavigate();
const location = useLocation();
....
navigate(&quot;/nextpath&quot;, { state: { from: location } });
...
</code></pre>
In the component you redirected to:
<pre><code>...
const location = useLocation();
let from = location.state?.from?.pathname;
...
</code></pre>

I am using react router. I want to detect the previous page (within the same app) from where I am coming from. I have the router in my context. But, I don't see any properties like "previous path" or history on the router object. How do I do it?

Detect previous path in react router?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我用的是反应路由器。我想从我来自的地方检测上一个页面(在同一个应用程序中)。我的上下文中有路由器。但是，我看不到路由器对象上的任何属性，比如“前一条路径”或历史记录。我该怎么做呢？

问在反应路由器中检测先前的路径？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在反应路由器中检测先前的路径？EN