React学习笔记(七) React Router
1、安装
React Router 是一个基于 React 的路由库，它被拆分为三个独立的包，分别是：
- react-router-dom：提供 Web 应用所需的特定组件
- react-router-native：提供移动应用所需的特定组件
- react-router-core：提供核心的路由组件
我们可以使用 Create React App 工具快速搭建一个脚手架作为练习的环境
> npm install -g create-react-app
> create-react-app my-project
> cd my-project
然后使用 NPM 在项目中添加 React Router（这里只需安装 react-router-dom 即可）
> npm install --save react-router-dom
这样我们就可以在 src/App.js 文件中写下我们的练习代码啦（直接用练习代码替换掉原文件内容就好）
2、入门
组件化的思维无处不在，路由的使用也是一样的，我们可以通过组件定义路由
在 React Router 中有三种基础组件，分别是 路由器组件、路由匹配组件 和 导航组件
我们先来看一个简单的例子
import React from "react";
import { BrowserRouter, Route, Link } from "react-router-dom";
function Index() { return <h3>Home</h3> }
function About() { return <h3>About</h3> }
function Users() { return <h3>Users</h3> }
function App() {
return (
<BrowserRouter>
{/* 路由器组件 BrowserRouter */}
{/* 注意，路由器组件只能有一个子元素，所以我们一般会使用 <div> 将元素包裹起来 */}
<div>
{/* 导航组件 Link，用于在前端页面展示导航样式，类似 <a> 标签 */}
{/* to 属性指定 URL 路径 */}
<Link to="/">Home</Link><br />
<Link to="/about/">About</Link><br />
<Link to="/users/">Users</Link><br />
{/* 路由匹配组件 Route，用于定义路由匹配规则，并在路径匹配成功后渲染组件 */}
{/* path 属性指定匹配的路径，component 属性指定使用的组件 */}
<Route path="/" exact component={Index} />
<Route path="/about/" component={About} />
<Route path="/users/" component={Users} />
</div>
</BrowserRouter>
)
}
export default App;
3、路由器组件
对于 Web 应用而言，react-router-dom 提供两种类型的路由器组件，<BrowserRouter> 和 <HashRouter>
一般而言，<BrowserRouter> 适用于 管理动态请求 的网站，<HashRouter> 适用于 呈现静态文件 的网站
每个 router 都会创建一个 history 对象用于跟踪当前 location，当 location 发生变化时就会重新渲染网页
路由器组件是 React Router 的核心组件，其它任何组件都必须包裹在路由器组件内使用
4、路由匹配组件
路由匹配组件用于定义路由匹配规则，react-router-dom 同样提供两种组件，<Route> 和 <Switch>
（1）<Route>
我们先来回顾一下上面的例子：
<Route path="/" exact component={Index} />
<Route path="/about/" component={About} />
<Route path="/users/" component={Users} />
<Route> 组件有两个常用的属性，分别是 path 和 component，它们的语义也很简单
就是当路径名与 path 属性定义的路径匹配时，渲染 component 属性定义的组件；若不匹配则渲染 null
什么才是 匹配的路径 呢？这里举一个例子，假设 path 定义的路径为 /about/，那么
- 当路径名为
/ab时，path 不匹配 - 当路径名为
/about时，path 匹配 - 当路径名为
/about/un，path 匹配
很简单，对吧！只要开头一样，path 就能匹配，但是这样会产生一个 多匹配的问题
什么意思呢？我们再来举一个例子，假设我们现在访问路径 /about，很显然我是希望程序只显示 About 组件的
但是由于路径 / 和 /about/ 都能匹配，所以程序最终会渲染出 Index 和 About 组件，这显然不符合我的意图
这时候，exact 属性 就可以派上用场啦，它用来指明匹配的路径必须完全一致才算匹配成功
也就是说，为第一个路由匹配组件添加 exact 属性后，当我们访问路径 /about 时，程序就只会显示 About 组件
（2）<Switch>
如果我们希望一次渲染一个组件，我们可以给 <Router> 包裹一个 <Switch> 组件
这样，它将按照路由定义的顺序进行匹配，并且当成功匹配到一个路由后停止匹配
<Switch>
<Route path="/" exact component={Index} />
<Route path="/about/" component={About} />
<Route path="/users/" component={Users} />
</Switch>
5、导航组件
导航组件用于在页面展示导航样式，react-router-dom 提供两种常用组件，<Link> 和 <NavLink>
（1）<Link>
我们还是回顾一下上面的例子：
<Link to="/">Home</Link><br />
<Link to="/about/">About</Link><br />
<Link to="/users/">Users</Link><br />
<Link> 组件很容易理解，它的作用和显示的样式与 <a> 标签十分相似
<Link> 组件有一个常用的属性 to，用于定义要跳转到的路径
（2）<NavLink>
<NavLink> 是 <Link> 的一种特殊类型，除了有一个常用的 to 属性之外
它还有一个 activeClassName 属性，用于定义当路径匹配后使用的样式
6、URL 参数
我们可以使用 :参数名称 为路径定义参数，例如 <Route path="/users/:username" component={Users} />
那么，当路径名为 /user/Alice 时，path 可以匹配；当路径名为 /user/Bob 时，path 也可以匹配
并且，在路由匹配成功后可以给 Users 组件传入参数 match 对象 以获取匹配的参数
import React from "react";
import { BrowserRouter, Route, Link } from "react-router-dom";
function Users({ match }) {
console.log(match)
return <h3>Hello { match.params.username }</h3>
}
function App() {
return (
<BrowserRouter>
<div>
<h3>User</h3>
<Link to="/users/Alice">To Alice</Link><br />
<Link to="/users/Bob">To Bob</Link><br />
<Route path="/users/:username" component={Users} />
</div>
</BrowserRouter>
)
}
export default App;
当路径为 /users/Alice 时，我们来看看 match 对象 包含了什么内容
{
isExact: true, // 是否为 exact 模式
params: { username: "Alice" }, // URL 参数
path: "/users/:username", // 定义的路径
url: "/users/Alice", // 真实的路径
__proto__: Object
}
7、查询参数
我们可以使用 ?查询字符串 定义查询参数，例如 <Link to="/users?name=Alice">To Alice</Link>
我们也可以为 <Link> 组件的 to 属性传入一个对象，在其中指定查询字符串
例如 <Link to={{ pathname: "/user", search: "?name=Bob" }}>To Bob</Link>
然后，在路由成功匹配后可以给组件传入 location 对象 以获取匹配的参数
import React from "react";
import { BrowserRouter, Route, Link } from "react-router-dom";
function Users({ location }) {
console.log(location)
return <h3>Hello { location.search.split('?')[1].split('=')[1] }</h3>
}
function App() {
return (
<BrowserRouter>
<div>
<h3>User</h3>
<Link to="/users?name=Alice">To Alice</Link><br />
<Link to={{ pathname: "/users", search: "?name=Bob" }}>To Bob</Link><br />
<Route path="/users" component={Users} />
</div>
</BrowserRouter>
)
}
export default App;
当路径为 /users?name=Alice 时，我们来看看 location 对象 包含了什么内容
{
key: "3qrwxq",
pathname: "/users", // 匹配的路径名称
search: "?name=Alice", // 查询参数（?后面的内容）
hash: "", // 锚点参数（#后面的内容）
__proto__: Object
}
8、重定向
import React from "react";
import { BrowserRouter, Route, Switch, Link, Redirect } from "react-router-dom";
function Matched() { return <h3>Matched!</h3> }
function App() {
return (
<BrowserRouter>
<div>
<Link to="/old-match">Old Match</Link> (to be redirected)<br/>
<Link to="/new-match">New Match</Link><br/>
<Switch>
{/* 当路径匹配到 `/old-match` 时，重定向到 `/new-match` */}
<Redirect from="/old-match" to="/new-match" />
<Route path="/new-match" component={ Matched } />
</Switch>
</div>
</BrowserRouter>
)
}
export default App;
9、防止转换
import React from "react";
import { BrowserRouter, Route, Switch, Link, Prompt } from "react-router-dom";
function Home() {
return (
<div>
<h3>Home Page Here!</h3>
<Link to="/about">To About Page</Link>
</div>
)
}
function About() {
return (
<div>
<h3>About Page Here!</h3>
<Link to="/">Return Home Page</Link>
{/* 不会实际渲染出来，但是在路径发生改变时会弹出提示信息 */}
<Prompt message={ `Are you sure you want to go to Home Page?` } />
</div>
)
}
function App() {
return (
<BrowserRouter>
<div>
<Switch>
<Route path="/" exact component={ Home } />
<Route path="/about" component={ About } />
</Switch>
</div>
</BrowserRouter>
)
}
export default App;
10、路由配置
import React from "react";
import { BrowserRouter, Route, Link } from "react-router-dom";
// 1、定义组件
function Home() { return <h2>Home Page</h2> }
function About({ routes }) { // 包含嵌套路由
return (
<div>
<h2>About Page</h2>
<Link to="/about/team">To Team</Link><br />
<Link to="/about/product">To Product</Link><br />
{ routes.map((route, index) => ( <RouteWithSubRoutes key={index} {...route} /> )) }
</div>
)
}
function Team() { return <h3>This is our team</h3> }
function Product() { return <h3>This is our product</h3> }
// 2、定义路由配置
const routes = [
{
path: "/home",
component: Home
},
{
path: "/about",
component: About,
routes: [
{
path: "/about/team",
component: Team
},
{
path: "/about/product",
component: Product
}
]
}
]
// 3、处理嵌套路由
function RouteWithSubRoutes(route) {
return <Route path={route.path} render={ (props) => ( <route.component {...props} routes={route.routes} /> )} />
}
// 4、传入路由配置
function App() {
return (
<BrowserRouter>
<div>
<Link to="/home">Home</Link><br />
<Link to="/about">About</Link><br />
{ routes.map((route, index) => ( <RouteWithSubRoutes key={index} {...route} /> )) }
</div>
</BrowserRouter>
)
}
export default App;
【 阅读更多关于 React Router 的内容，请参考 官方文档】
【 阅读更多 React 系列文章，请看 React学习笔记 】
