react-router-domV5使⽤指南（1）
react-router-dom V5 使⽤指南（1）
react-router 提供了路由核⼼接⼝，如 Router、Route、Switch 等，未提供终端操作相关的接⼝；
react-router-dom 提供了浏览器端接⼝，BrowserRouter、HashRouter，Route、Link 等API；
react-router-native 提供了 native 端的相关接⼝。
学习⽅法
初学者建议先熟悉⼀遍，看⼀篇阐述的⽐较清楚的实战⽂章，这⾥我整理了⼀些资料：
实⽤例⼦
路由跳转
演⽰地址：reactrouter/web/example/basic，这是⼀个⾮常简单的例⼦，从这个例⼦可以学到在React中路由功能是如何实现的，没有什么难度: Link：实现了URL点击跳转的功能，点击它可以跳转到指定的路由URL
Route：⽤于配置路由
Switch：保证在⼀组路由中只渲染⼀个
获取 URL Params
演⽰地址：reactrouter/web/example/url-params，这个例⼦也⽐较简单没什么值得说的：
useParams: 可以在任意级别的组件⾥获取 URL Params。V5.1之前⾮Route⼦组件是没办法获取到，你需要借助 withRouter。
路由嵌套
演⽰地址：reactrouter/web/example/nesting，路由嵌套理解为：在 Route 组件的⼦孙组件中存在 Route 组件，⽐如：
<Route path="/topics">
<h1>parent</h1>
<Route path="/topics/:topicId">
child
</Route>
</Route>
值得注意的是，演⽰地址中使⽤了useRouteMatch，它在这个例⼦中的作⽤是将与他匹配成功的路由信息出来，举个例⼦就很容易理解：
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useParams,
useRouteMatch
} from "react-router-dom";
export default function NestingExample() {
return (
<Router>
<Switch>
<Route path="/topics">
<Topics />
</Route>
</Switch>
</Router>
)
;
}
function Topics() {
let { path, url } = useRouteMatch();
console.log(useRouteMatch())
// 在这⾥必须使⽤ useRouteMatch 出当前匹配成功的 Route 的 path 信息, 否则⼦路由⽆法跳转
return (
<div>
<h2>Topics</h2>
<ul>
<li>
<Link to={`${url}/rendering`}>Rendering with React</Link>
</li>
</ul>
<Switch>
<Route path={`${path}/:topicId`}>
<Topic />
</Route>
</Switch>
</div>
);
}
function Topic() {
let { topicId } = useParams();
console.log(useRouteMatch())
return (
<div>
<h3>{topicId}</h3>
</div>
);
}
当访问 url path 为/topics/props-v-state时，打印信息如下：
重定向
演⽰地址：reactrouter/web/example/auth-workflow，重定向是路由系统中不可或缺的功能，常被⽤于登录跳转等场景中，由于React崇尚⼀切皆组件的思想，所以在React 中，当您需要重定向时，只需返回⼀个Redirect组件：
// state 常⽤来携带额外信息
<Redirect
to={{
pathname: "/login",
state: { from: '/orders' }
}}
/>
在该演⽰地址代码中(简化后)，⼀个⾮常值得学习的技巧是：ProtectedPage是需要登录才能访问的，但是我们将登录校验以及重定向的操作封装到了PrivateRoute组件中，两者被隔离开，降低代码逻辑的耦合⾏，⼤⼤增⼤了代码的复⽤性：
export default function AuthExample() {
return (
<Router>
<div>
<Switch>
<Route path="/login">
<LoginPage />
</Route>
<PrivateRoute path="/protected">
<ProtectedPage />
</PrivateRoute>
</Switch>
</div>
</Router>
);
}
function PrivateRoute({ children, ...rest }) {
return (
<Route
react router路由传参
{...rest}
render={({ location }) =>
fakeAuth.isAuthenticated ? (
children
) : (
<Redirect
to={{
pathname: "/login",
state: { from: location }
}}
/>
)
}
/>
)
;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。