携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第30天，点击查看活动详情

1. React 路由介绍

问：为什么会产生路由？

答：是因为现在的前端应用大多都是 SPA（单页应用程序），也就是只有一个 HTML 页面的应用程序。为了有效的使用单个页面来管理原来多个页面的功能，所以就产生了前端路由。而且因为它的用户体验更好、对服务器的压力更小，所以很受欢迎。

可以从以下几点总结一下什么是路由：

前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面）
前端路由是一套映射规则，在 React 中，是 URL 路径与组件的对应关系
使用 React 路由简单来说，就是配置路径和组件（配对）

2. 路由的基本使用

2.1 使用步骤

安装：yarn add react-router-dom

导入路由相关组件：Router / Routes / Route / Link

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'

使用 Router 组件包裹整个应用（重要）

<Router>
    <div className='app'>
      <h1>React 路由基础</h1>
    </div>
</Router>

使用 Link 组件作为导航菜单（路由入口）

<Link to="/first">页面一</Link>

使用 Route 组件配置路由规则和要展示的组件（路由出口）并包裹在 Routes 组件中

const First = () => <p>页面一的内容，使用路由的时候还要注意react-router-dom的版本问题，写法不一样。</p>

// 使用 Router 组件
const App = () => (
  <Router>
    <div className='app'>
      <h1>React 路由基础</h1>
      {/* 指定路由入口 */}
      <Link to="/first">点击展示页面一</Link>
      
      {/* 指定路由出口：版本不一样，这里写法不一样 */}
      {/* 版本6以下写法 */}
      {/* <Route path="/first" component={First} /> */}
      
      {/* 版本6以上写法 */}
      <Routes>
        <Route path="/first" element={<First />} />
      </Routes>
    </div>
  </Router>
)

效果演示

2.2 常用组件说明

Router 组件：包裹整个应用，一个 React 应用只需要使用一次。
HashRouter：使用 URL 的哈希值实现（localhost:3000/#/first），会有一个 # 号，一般不推荐使用。
BrowserRouter：使用 H5 的 history API 实现（localhost:3000/first），推荐使用。
Link 组件：用于指定导航连接（a 标签）。
Routes 组件：用于包裹 Route 组件。
Route 组件：指定路由展示组件相关信息。

3. 路由的执行过程

点击 Link 组件（a标签），修改了浏览器地址栏中的 url。
React 路由监听到地址栏 url 的变化。
React 路由内部遍历所有 Route 组件，使用路由规则（path）与 pathname 进行匹配。
当路由规则（path）能够匹配地址栏中的 pathname 时，就展示该 Route 组件的内容。

4. 编程式导航

场景：点击登录按钮，登陆成功后，通过代码跳转到后台首页，如何实现？
编程式导航：通过 JS 代码来实现页面跳转。
使用 useNavigate 钩子函数生成 navigate 函数，可以通过 JS 代码完成路由跳转。
useNavigate(path)：跳转到某个页面，参数 path 表示要跳转的路径。
useNavigate(n)：前进或后退到某个页面，参数 n 表示前进或后退页面数量（比如：-1 表示后退到上一页）。

// 导入ract
import React from 'react'
import ReactDOM from 'react-dom'

// 导入路由组件
import { BrowserRouter as Router, Route, Link, Routes, useNavigate } from 'react-router-dom'

// 登录页
const Login = () => {
  const navigate = useNavigate();
  return (
    <div>
      <h1>登录页</h1>
      <button onClick={() => navigate('/home')}>点击登录</button>
    </div>
  )
}

// 首页
const Home = () => {
  const navigate = useNavigate();
  return (
    <div>
      <h1>首页</h1>
      <button onClick={() => navigate(-1)}>返回登录</button>
    </div>
  )
}

// 使用 Router 组件
const App = () => (
  <Router>
    <div className='app'>
      <h1>编程式导航</h1>
      <Link to="/login">去登录页</Link>

      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/home" element={<Home />} />
      </Routes>
    </div>
  </Router>
)

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

演示效果：

5. 默认路由

问题：现在的路由都是点击导航栏菜单后展示的，如何在进入页面的时候就展示呢？
默认路由：表示进入页面时就会匹配的路由
默认路由 path 为：/

简单学习一下 React 中的路由