路由 React Router V5

安装

yarn add react-router-dom

配置路由

import { BrowserRouter, Route } from "react-router-dom";

BrowserRouter 组件是 React Router 的核心
Route 组件是 React Router 的具体配置

栗子

import React from "react";
import { BrowserRouter, Route, Link } from "react-router-dom";

import Home from "./pages/home/index";
import Me from "./pages/me/index";

function App() {
  return (
    <BrowserRouter>
      <ul>
        <li>
          <Link to="/">首页</Link>
        </li>
        <li>
          <Link to="/me">我的</Link>
        </li>
      </ul>
      <Route path="/" exact component={Home} />、
      <Route path="/me" component={Me} />
    </BrowserRouter>
  );
}

export default App;

在浏览器地址栏中输入 http://localhost:3000 的时候，React Router 会匹配到 这一条记录，然后就会在当前位置渲染对应的 component。

React 入口文件中(一般是 index.js 文件)，引入 App.js 文件并挂载到页面上

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

通过链接跳转路由

引入 Link 这个组件即可

<ul>
  <li>
    <Link to="/">首页</Link>
  </li>
  <li>
    <Link to="/me">我的</Link>
  </li>
</ul>

Route 的匹配规则

在对 Route 进行配置的时候，我们可以传以下参数：path、exact、component、render、children

五种 Route 的配置方式

<Route component={Home} />

在配置 Route 的时候没有指定 path 属性，这时只要你打开项目，无论你访问什么路径，这个 Route 都会匹配到。

<Route path="/" component={Home} />

配置 Route 的时候，指定 path="/" ，和上面配置的效果一样，只要你打开项目，无论你访问什么路径，这个 Route 都会匹配到。这种配置方式我们成为 "非严格匹配" ，你在项目中访问的任何一个路径，里面都会包含 path="/" 的路径。所以无论访问什么路径，这个 Route 都会匹配到。

<Route path="/" exact component={Home} />

和上面一条的配置方式不同，这里在配置 Route 的时候，传入了 exact 属性，说明这个配置方式是 "严格匹配" ，只有当我们访问项目的根路径的时候，才会匹配到这个 Route。比如：localhost:3000/ 。

<Route path="/me" component={Me} />

常规的 Route 配置方式，当我们访问"/me"路径的时候，匹配到这个 Route，进而渲染出对应的 component。

<Route
  path="/test"
  render={() => {
    return <div>测试页面</div>;
  }}
/>

这里没有 component 属性，而是换成了 render 属性。该属性是一个函数，当匹配到这个 Route 的时候，页面将会渲染出这个函数返回的内容

Switch 组件

当进行路由匹配的时候，一旦匹配到了 Switch 组件中的一个 Route，那么就不会再继续匹配
使用场景: 如果当前路径没有匹配到任何 Route 的时候，路由跳转到 404 页面

import React from "react";
import { BrowserRouter, Route, Link, Switch } from "react-router-dom";

import Home from "./pages/home/index";
import Me from "./pages/me/index";

const NotFound = () => {
  return <div>找不到该页面</div>;
};

function App() {
  return (
    <BrowserRouter>
      <ul>
        <li>
          <Link to="/">首页</Link>
        </li>
        <li>
          <Link to="/me">我的</Link>
        </li>
      </ul>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/me" component={Me} />
        <Route
          path="/test"
          render={() => {
            return <div>测试页面</div>;
          }}
        />
        <Route component={NotFound} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

嵌套路由

import React, { Component } from "react";
import { Route, Link } from "react-router-dom";

const Vue = () => {
  return <div>Vue</div>;
};

const ReactTest = () => {
  return <div>ReactTest</div>;
};

export default class Me extends Component {
  render() {
    return (
      <div>
        <ul>
          <li>
            <Link to={`${this.props.match.path}/vue`}>vue</Link>
          </li>
          <li>
            <Link to={`${this.props.match.path}/react`}>react</Link>
          </li>
        </ul>
        <div>
          <Route path={`${this.props.match.path}/vue`} component={Vue}></Route>
          <Route
            path={`${this.props.match.path}/react`}
            component={ReactTest}
          ></Route>
        </div>
      </div>
    );
  }
}