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

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

1、安装react-route-dom

在你的项目中执行

npm i react-router-dom
复制代码

来安装reacr-router

2、编写最简单的路由

在个人项目中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

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

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

建立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没有匹配路由样式，通常用在按钮点击跳转等。

4、实现多级路由嵌套

上面咱们只实现了一级路由，但咱们还想在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组件实现二级路由跳转，其更深层级的路由与这个同样，只须要在子组件中再嵌套就行

5、动态路由及路由传参

咱们想要在路由跳转的传递参数就须要用到咱们的动态路由了。 用法很是简单，在定义路由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方法解析参数

6、编程式导航

能够看到咱们以前的路由跳转全是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 的基本使用以及实际项目中的使用就讲解完毕了，若是还有什么不理解的小伙伴能够在下面留言哦！