关于react.js:React-Router-6-React路由-最详细教程

React Router 经验多个版本的倒退，当初曾经到了 React Router 6。尽管网络上写 React-Router 路由自身的教程很多，但真正讲到 React-Router 6 的并不多。同时因为第 6 版引入了很多新的概念，以及大量应用 Hook，因而网上的很多旧教程曾经不实用了。这篇文章里咱们总结 React Router 6 路由器的用法，用例子阐明如何实现各种场景和需要，比方程序化跳转等等。

在卡拉云中，咱们也大量地应用了 React-Router 6，所以在解说过程中咱们会用一些在理论应用的例子来阐明问题，但本文的次要例子会放在 github 仓库中，不便你参考。如果你感觉有用，无妨分享和加星，或在博客中链回本文，让更多人看到。

本系列中其它优良教程请参考

• React 表格教程
• React 拖拽教程
• React 富文本组件

当然如果你心愿疾速搭建后盾零碎，也举荐尝试卡拉云，能够免掉前后端开发、保护的懊恼

什么是 React-Router

要了解什么是 React-Router 就要先了解什么是 SPA (Single Page Application)，也就是俗称的单页利用。

每个单页利用其实是一系列的 JS 文件，当用户申请网站时，网站返回一整个 (或一系列) 的 js 文件和 HTML，而当用户在某个页面内点击时，你须要通知浏览器怎么加载另一个页面地址。单页利用中通常只有一个 index.html 文件的，所以浏览器自带的 <a> 链接 tag 并不能用来做单页利用的跳转，因而你须要一个在 React 中的路由实现。

然而 React 框架自身是不领路由性能的，因而如果你须要实现路由性能让用户能够在多个单页利用中跳转的话，就须要应用 React-Router。

React-Router 从 2014 年开始开发，到当初曾经经验了 6 次大版本迭代，而从它的使用者来看，Netflix, Twitter, Discord 等等大厂纷纷背书，因而 React-Router 曾经根本成了在 React 中做路由的默认选项。如果你当初还在用老的版本，想要降级，那么能够参考降级教程，否则的话能够一步步参考本文。

在读完本文后，你应该可搭起来如下这样的简略利用，用一个导航栏管制用户能够拜访的页面，同时爱护某些页面，必须在用户登录后才能够进入。

尽管这个利用看起来简略，然而它却蕴含了 React-Router 中常见的性能和 API，包含

• BrowserRouter
• Link
• Routes
• Route
• Outlet

等等

如何装置 React-Router

装置 React-Router 非常简单，如果你应用的是 yarn 或者 npm，则用通常的装置形式即可

咱们先用 create-react-app 脚手架建起一个 app 来

npx create-react-app react-router-6-tutorial

而后用 npm 装置

如果应用 npm 的话则是

npm install react-router-dom@6

yarn 装置

yarn add react-router-dom@6

这样 react-router 就装置好了。留神如果在 web 上的话，你须要的是 react-router-dom 而不是 react-router 这个包。它们的区别是，后者蕴含了 react-native 中须要的一些组件，如果你只须要做网页利用的话，用前者就能够了

React Router API

React Router 的 API 在它的官网文档上曾经介绍得比较清楚了，咱们这里简略地总结一下几个可能用到的 API。具体的用法在下文中咱们具体来讲，这里只是作为参考，如果碰上问题能够查一查

BrowserRouter

在 React Router 中，最外层的 API 通常就是用 BrowserRouter。BrowserRouter 的外部实现是用了 history 这个库和 React Context 来实现的，所以当你的用户后退后退时，history 这个库会记住用户的历史记录，这样须要跳转时能够间接操作。

BrowserRouter 应用时，通常用来包住其它须要路由的组件，所以通常会须要在你的利用的最外层用它，比方如下

import ReactDOM from 'react-dom'
import * as React from 'react'
import {BrowserRouter} from 'react-router-dom'
import App from './App`

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
, document.getElementById('app))

Route

Route 用来定义一个拜访门路与 React 组件之间的关系。比如说，如果你心愿用户拜访 https://your_site.com/about 的时候加载 <About /> 这个 React 页面，那么你就须要用 Route:

<Route path="/about" element={<About />} />

Routes

Routes 是用来包住路由拜访门路 (Route) 的。它决定用户在浏览器中输出的门路到对应加载什么 React 组件，因而绝大多数状况下，Routes 的惟一作用是用来包住一系列的 Route，比方如下

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

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

在这里，Routes 通知了 React Router 每当用户拜访根地址时，加载 Home 这个页面，而当用户拜访 /about 时，就加载 <About /> 页面。

React Router 实操案例

在上文中咱们介绍了 React Router 的 API，余下全文中咱们用一个实例来阐明如何应用 React Router。

首先咱们建起几个页面

<Home />

<About />

<Dashboard />

Home 用于展现一个简略的导航列表，About用于展现对于页，而 Dashboard 则须要用户登录当前才能够拜访。

首先咱们新建一个 router.js 文件，并在其中加载好 React-Router 组件

import './App.css';
import {BrowserRouter, Route, Routes} from "react-router-dom"

function App() {

  return <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />} />
    </Routes>
  </BrowserRouter>
}

const Home = () => {return <div>hello world</div>}

export default App;

这里咱们间接在 App.js 中加上一个叫 Home 的组件，外面只是单纯地展现 hello wolrd 而已。接下来，咱们再把另外两个门路写好，退出 About 和 Dashboard 两个组件

import './App.css';
import {BrowserRouter, Route, Routes} from "react-router-dom"

function App() {

  return <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/dashboard" element={<Dashboard />} />
    </Routes>
  </BrowserRouter>
}

const Home = () => {return <div>hello world</div>}

const About = () => {return <div> 这里是卡拉云的主页 </div>}

const Dashboard = () => {return <div> 今日沉闷用户: 42</div>}

export default App;

此时，当咱们在浏览器中切换到 / 或 /about 或 /dashboard 时，就会显示对应的组件了。留神，在下面每个 Route 中，用 element 项将组件传下去，同时在 path 项中指定门路。在 Route 外，用 Routes 包裹起整路由列表。

写到这里，咱们其实曾经实现了一个根本的路由性能，对于绝大多数能够公开拜访的网站(或者外部零碎)，这差不多就曾经完结的。但有时，你可能心愿晓得用户所在的门路，来做一些对应显示和非凡逻辑解决，或者是你须要让用户鉴权后能力拜访某个门路，那么你须要持续读一下后文几个章节

如何获取当前页门路

如何在 React-Router 中获取以后用户在拜访的页面的门路？其实很简略，在 React-Rotuer 6 中，提供了一个 hook 钩子，专门用来取得以后门路。在上文的例子中，咱们只须要在对应的页面里，比方 About 中，加上这个 hook 就能够了

首先咱们导入 useLocation 这个 hook，而后仿照如下代码就能够取得以后地位

import {useLocation} from 'react-router-dom'

const About = () => {
  // 应用 hook
  const location = useLocation();
  const {from, pathname} = location

  return <div> 这里是卡拉云的网站，你以后在 {pathname}，你是从 {from} 跳转过来的 </div>
}

如何设置默认页门路(如 404 页)

在上文的路由列表 Routes 中，咱们能够退出一个 catch all 的默认页面，比方用来作 404 页面。

咱们只有在最初退出 path 为 * 的一个门路，意为匹配所有门路，即可

function App() {

  return <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/dashboard" element={<Dashboard />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  </BrowserRouter>
}

// 用来作为 404 页面的组件
const NotFound = () => {return <div> 你来到了没有常识的荒原 </div>}

当然你能够把 404 页面做得更好看一点，比方卡拉云中如果拜访不存在的链接的话，404 页面如下

如何用 React Router 鉴权并爱护门路

总结

本文中咱们介绍了如何应用 React-Router，用一个实例阐明 React Router 6 中的 API，以及常见的应用场景等。如果你对咱们的技术博客感兴趣，欢送持续浏览

• Vue Video.js 教程
• Vue 强制刷新
• Echarts 折线图如何配置
• Vue 弹窗