React路由 | 介绍几种常用的react-router-v5的方法

使用 react-router 来进行页面跳转是我们学习react的基本功。笔者最近上手react 不久，也必然遇到了使用 react-router来跳转的几种情景。所以结合个人的项目时间，就写就本文，当作是一个总结。

本文主要关注以下几种场景：

1. 通过手动修改url进行路由跳转；
2. 对页面局部组件进行切换和跳转；
3. 为了变更顶层页面组件，进行跳转；
4. 对于无法匹配的资源，进行跳转到 404 页面；

本文不从代码原理层面对react-router进行阐释，仅讲解如何快速上手react-router。

以下我将会结合个人的项目代码对react-router进行讲解。

• 通过手动修改url进行路由跳转；

我们引入了 Router 组件，并且在其内部引入switch组件进行路由切换，然后在switch定义好Route组件对应的 path和组件。

这样我们就能够在浏览器的修改url访问组件了。
如： 输入 localhost:3000/login 访问login组件。

import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { Router, Route, Switch } from "react-router-dom";
import LoginPage from "views/LoginPage/LoginPage.jsx";
import RegisterPage from "views/RegisterPage/RegisterPage.jsx";
import Admin from "layouts/Admin.jsx";

const hist = createBrowserHistory();

ReactDOM.render(
  <Router history={hist}>
    <Switch>
      <Route path="/login" component={LoginPage} />
      <Route path="/register" component={RegisterPage} />
      <Route path="/" component={Admin} />
    </Switch>
  </Router>,
  document.getElementById("root")
);

• 对页面局部组件进行切换和跳转；

我们在Router里头，使用 Link 组件和Route组件来定义局部的路由跳转。

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

function BasicNav() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>  // 点击 home，下方将会跳转到 Home组件
          </li>
          <li>
            <Link to="/task">Task</Link>
          </li>
          <li>
            <Link to="/setting">Setting</Link>
          </li>
        </ul>
        <hr />
        /* 根据link的点击，决定渲染哪一个局部的组件 */
        <Route exact path="/" component={Home} />
        <Route path="/task" component={Task} />
        <Route path="/setting" component={Setting} />
      </div>
    </Router>
  );
}

如果你想点击某一个按钮，实现局部的跳转，那么你要对上面的的l<li>标签进行修改，注意使用 Link 组件来嵌套button，而不能颠倒；

<Link to="/task"}>
    <Button variant="contained" color="primary">
       <AddIcon /> 创建任务
    </Button>
</Link>

<Route path="/task" component={Task} />

如果你的当前的组件并不是顶层组件，那么route组件的path需要在原来的基础上加入match.url。
上述的例子是当你当前的url是localhost:3000时才会有localhost:3000/task的。

如果你的当前url是localhost:3000/user，那么你要要指向```localhost:3000/user/task，你就必须加上match.url，这个match.url就相当于/users`。
就像这样：

function BasicNav(props){
	const {match} = props   // 从props参数引入match
}	

// 下面代码本是写在组件里头的，这里是为了简化
<Link to={`${match.url}/task`}>
     <Button variant="contained" color="primary">
          任务
     </Button>
</Link>

<Route path={`${match.url}/task`}> component={Task} />

再说一点，如果你要对路由得到的组件进行传参，那么在Route组件里头你应该以箭头函数的方式来声明component。像这样：

<Route
    path="/task"
    component={() => (
     <Task transferMsg={transferMsg}/>
    )}
 />

• 为了变更顶层页面组件，进行跳转；

这里我们直接通过对history对象进行push某一路径进行跳转。以下是一个简单的例子。

// 顶层路由组件  index.jsx
ReactDOM.render(
  <Router history={hist}>
    <Switch>
      <Route path="/login" component={LoginPage} />
      <Route path="/register" component={RegisterPage} />
      <Route path="/" component={Admin} />
    </Switch>
  </Router>,
  document.getElementById("root")
);

// 假设这是在登录组件 login.jsx，当前位置是 localhost:3000/login
import { Route, Link } from "react-router-dom";

function LoginPage(props) {
  const {history} = props;
	
  const jump = ()=> {
  	history.push("register");
  }	

  return (
    <Button onClick={jump}>
    	注册页
    </Button>
  );

4. 对于无法匹配的资源，进行跳转到 404 页面或者重定向；

假如 Link to指向的路径无法在Route中匹配，那么你可以添加一个404组件，所有没有匹配到path的路由都会指向这个404组件。

而对于某一特定的path，你想重定向到另外一个页面，你也可以使用redirecter的方法来改变path。

function NotMatch(){
  return <p>Not Match. 404 </p>
}

function NoMatchExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/will/not/match">Not Match</Link>
          </li>
          <li>
            <Link to="/old-match">To be redirected</Link>
          </li>
        </ul>
        <Switch>
          <Route path="/" exact component={Home} />
          <Redirect from="/old-match" to="/" />  // 当路径为old-match，重定向回主页。
          <Route component={NoMatch} />  // 不指明 path，匹配404组件
        </Switch>
      </div>
    </Router>
  )}

以上大概就是几种比较常用的路由方式啦，接下来在项目实践中如果遇到其他的情景，我会继续进行补充。