React学习笔记(七) React Router

目录

• 1、安装
• 2、入门
• 3、路由器组件
• 4、路由匹配组件
• 5、导航组件
• 6、URL 参数
• 7、查询参数
• 8、重定向
• 9、防止转换
• 10、路由配置

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学习笔记 】