React Router 5.1 - useLocation hook - 确定过去的位置
React Router 5.1 - useLocation hook - determine past locations
根据 React Router 5.1 documentation 应该可以看到 "where the app is now, where you want it to go, or even where it was"。在我的应用程序中,我需要查看 "where it was" - 我在 到达特定位置之前 访问了哪些位置。
更准确地说;我希望找到与特定模式匹配的先前位置。该位置可能是两三个位置之前。
但是 - 我不知道如何执行此操作。
实现此目标的最佳推荐方法是什么?
亲切的问候/K
在 React Router 中,如果您需要对历史记录中的先前路径做出反应,则可以使用 goBack() 方法。此外,有可能将您的路径推送到历史状态,但只有在您需要知道先前位置的 URL 时才需要这样做。
您可以从此处阅读有关此功能的更多信息:https://reacttraining.com/react-router/web/api/history
你可以查看这个例子。希望对你有帮助。
import React from "react";
import {BrowserRouter as Router,Switch,Route,Link} from "react-router-dom";
import { withRouter } from "react-router";
export default function BasicExample() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
<hr />
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
</Switch>
</div>
</Router>
);
}
function Home() {
return (
<div>
<h2>Home</h2>
</div>
);
}
const About = withRouter(({history, ...props}) => (
<h1 {...props}>
About
<hr/>
<button onClick={() => {history.push('/')}}>go back</button>
</h1>
));
返回-2的另一个例子
import React from "react";
import {BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";
import {withRouter} from "react-router";
export default function BasicExample() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/about/insideabout">Inside About</Link>
</li>
</ul>
<hr/>
<Switch>
<Route exact path="/">
<Home/>
</Route>
<Route exact path="/about">
<About/>
</Route>
<Route path="/about/insideabout">
<InsideAbout/>
</Route>
</Switch>
</div>
</Router>
);
}
function Home() {
return (
<div>
<h2>Home</h2>
</div>
);
}
const About = withRouter(({history, ...props}) => (
<div>
<h1>
About
<hr/>
<button onClick={() => {
// history.push('/')
history.goBack(-1);
}}>go back
</button>
</h1>
</div>
));
const InsideAbout = withRouter(({history, ...props}) => (
<h1 {...props}>
Inside About
<hr/>
<button onClick={() => {
history.goBack();
}}>go back
</button>
<button onClick={() => {
history.go(-2);
}}>go home
</button>
</h1>
));
事实证明,对我来说,查看应用程序的最佳方式是简单地使用 React Router Link 中的状态 属性。
This article 关于如何将状态从 Link
传递到组件确实有助于解释如何使用 Link
状态。
基本上 Link
可以将状态 属性 传递给渲染组件。
<Link to={{ pathname: "/courses", state: { fromDashboard: true } }} />
渲染的组件然后通过props.location.state
访问状态
结合将道具传递给生成链接的组件解决了我的问题! (^__^)
根据 React Router 5.1 documentation 应该可以看到 "where the app is now, where you want it to go, or even where it was"。在我的应用程序中,我需要查看 "where it was" - 我在 到达特定位置之前 访问了哪些位置。
更准确地说;我希望找到与特定模式匹配的先前位置。该位置可能是两三个位置之前。
但是 - 我不知道如何执行此操作。
实现此目标的最佳推荐方法是什么?
亲切的问候/K
在 React Router 中,如果您需要对历史记录中的先前路径做出反应,则可以使用 goBack() 方法。此外,有可能将您的路径推送到历史状态,但只有在您需要知道先前位置的 URL 时才需要这样做。
您可以从此处阅读有关此功能的更多信息:https://reacttraining.com/react-router/web/api/history
你可以查看这个例子。希望对你有帮助。
import React from "react";
import {BrowserRouter as Router,Switch,Route,Link} from "react-router-dom";
import { withRouter } from "react-router";
export default function BasicExample() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
<hr />
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
</Switch>
</div>
</Router>
);
}
function Home() {
return (
<div>
<h2>Home</h2>
</div>
);
}
const About = withRouter(({history, ...props}) => (
<h1 {...props}>
About
<hr/>
<button onClick={() => {history.push('/')}}>go back</button>
</h1>
));
返回-2的另一个例子
import React from "react";
import {BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";
import {withRouter} from "react-router";
export default function BasicExample() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/about/insideabout">Inside About</Link>
</li>
</ul>
<hr/>
<Switch>
<Route exact path="/">
<Home/>
</Route>
<Route exact path="/about">
<About/>
</Route>
<Route path="/about/insideabout">
<InsideAbout/>
</Route>
</Switch>
</div>
</Router>
);
}
function Home() {
return (
<div>
<h2>Home</h2>
</div>
);
}
const About = withRouter(({history, ...props}) => (
<div>
<h1>
About
<hr/>
<button onClick={() => {
// history.push('/')
history.goBack(-1);
}}>go back
</button>
</h1>
</div>
));
const InsideAbout = withRouter(({history, ...props}) => (
<h1 {...props}>
Inside About
<hr/>
<button onClick={() => {
history.goBack();
}}>go back
</button>
<button onClick={() => {
history.go(-2);
}}>go home
</button>
</h1>
));
事实证明,对我来说,查看应用程序的最佳方式是简单地使用 React Router Link 中的状态 属性。
This article 关于如何将状态从 Link
传递到组件确实有助于解释如何使用 Link
状态。
基本上 Link
可以将状态 属性 传递给渲染组件。
<Link to={{ pathname: "/courses", state: { fromDashboard: true } }} />
渲染的组件然后通过props.location.state
结合将道具传递给生成链接的组件解决了我的问题! (^__^)