React Router 基本使用及实际项目使用详解

React Router 是搭配React项目开发时强大的路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。

一、安装react-route-dom

在你的项目中执行

npm i react-router-dom

来安装reacr-router

二、编写最简单的路由

在我的项目中App是作为我的根组件的，我编写基本路由就在App组件内，这里根据实际项目来写，有的是写在单独的router组件里。

index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import App from './views/App';
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.register();

App.jsx :

import React from 'react'
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'
import Home from './Home/Home'
import Login from './Login/Login'

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/home" component={Home} />
        <Route path="/login" component={Login} />
        <Redirect from="*" to="/home" />
      </Switch>
    </Router>
  )
}

export default App

• 在App.jsx中引入了react-router-dom库中的BrowserRouter设置别名为Router，与BrowserRouter相对应的还有HashRouter，BrowserRouter就是我们最常见的history路由，HashRouter就是会在路由前加#的hash路由。
• react-router-dom库中的Route，两个属性path和component表示匹配的路由为path的时候加载的组件component
• react-router-dom库中的Switch，Switch表示每次只匹配一个路由，路由Route从上往下模糊匹配(即 /home可能同时匹配/home/1和/home/2)，加了Switch后只会加载最先匹配到的组件
• react-router-dom库中的Redirect，表示重定向路由，其中两个值from和to，from表示匹配到的路由，to是重定向的路由
• 至此，我们的一个最简单的路由实现完毕，可以实现输入/home加载Home组件，输入/login加载Login组件，且其他不匹配的路由全部重定向到/home

三、实现路由跳转及导航路由

上面我们实现了基本的路由功能，但是现在我们只能在浏览器中输入的方式进行跳转，我们想要在页面中有头部导航，或者按钮点击跳转的功能。

创建Header组件：

import React from "react";
import { NavLink } from "react-router-dom";
import './Header.scss'

function Header() {
  return (
    <div>
      <ul>
        <li>
          <NavLink to="/home/user">用户管理</NavLink>
        </li>
        <li>
          <NavLink to="/home/article">文章管理</NavLink>
        </li>
      </ul>
    </div>
  );
}

export default Header;

• Header组件中引入react-router-dom的NavLink，是专门用来做导航链接跳转的标签，与之对应的是Link。用法类似只有一个to属性表明点击跳转到哪个链接。
• NavLink和Link不同的是，NavLink会在匹配的路由中加一个active样式，我们可以自定义这个样式，一般用在整体头部导航组件等，Link没有匹配路由样式，一般用在按钮点击跳转等。

四、实现多级路由嵌套

上面我们只实现了一级路由，但我们还想在Home组件中有二级路由怎么实现呢？

Home组件：

import React from "react";
import { Route, Redirect } from "react-router-dom";
import Header from "../../components/Header/Header";
import User from "../User/User";
import Article from "../Article/Article";

function Home() {
  return (
    <div>
      <Header />
      <Route path="/home/user" component={User} />
      <Route path="/home/article" component={Article} />
      <Redirect from="*" to="/home/user" />
    </div>
  );
}

export default Home;

• 在Home组件中引入react-router-dom的Route和Redirect，这里我们没有再引入Router和Switch，因为他们是在App组件中，会全局适配。
• 用法与之前一样，只不过我们匹配的路径path成了/home下的二级路由模式/home/user
• 并引入我们之前写的Header组件实现二级路由跳转，其更深层级的路由与这个一样，只需要在子组件中再嵌套就行

五、动态路由及路由传参

我们想要在路由跳转的传递参数就需要用到我们的动态路由了。
用法非常简单，在定义路由Route时写成/home/article/:id后面接一个:参数名

看一个示例:

import React from "react";
import { Route } from "react-router-dom";
import Article from "../Article/Article";

function Home() {
  return (
    <div>
      <Route path="/home/article/:id" component={Article} />
    </div>
  );
}

export default Home;

然后在跳转的时候在路由后面加上传递的id值

<Link to="/home/article/1">文章管理</Link>

在Article组件中接收动态路由传递过来的id值

import React from 'react'

function Article(props) {
  console.log(props.match.params.id);
  return (
    <div>
      文章信息
    </div>
  )
}

export default Article

在props.match.params.id就可以接收到传递过来的值

但当我们在路由中想要传递更多更复杂的参数的这样方式就非常麻烦了，此时我们用到另一种方式

Route定义还是按普通方式

<Route path="/home/article" component={Article} />

在Link跳转时传递参数

<Link to="/home/article?a=1&b=2">文章管理</Link>

或者

<Link to={{
  pathname: "/home/article",
  search: "?a=1&b=2"
}}>文章管理</Link>

在Article组件中接受参数

import qs from 'qs'
qs.parse(props.location.search)

引入qs模块，用qs.parse方法解析参数

六、编程式导航

可以看到我们之前的路由跳转全是Link和NavLink标签式跳转的方式，但某些情况下，比如我们在跳转前会执行一些逻辑判断等符合条件再跳转，此时就需要用到我们的编程式导航。

使用了Route的组件上props里面会接收三个属性：history，location，match，其中history就是我们用来进行编程式导航跳转的，location和match里面是我们的一些路由信息，如当前pathname，参数等

• props.history.push 进行路由跳转，会生成历史记录

props.history.push("/home/article")

• props.history.replace 进行路由跳转，替换当前路由，不会生成历史记录

props.history.replace("/home/article")

• props.history.go | props.history.goBack 路由前进一步 | 路由后退一步

至此，我们React Router 的基本使用以及实际项目中的使用就讲解完毕了，如果还有什么不理解的可以评论或者私信我！