【React】12.路由

1.路由介绍

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

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

2.路由的基本使用

2.1 安装路由组件

安装yarn，已有的跳过

npm install -g yarn
1

使用yarn 安装路由组件

yarn add react-router-dom
1

2.2 导入路由组件

import {
  BrowserRouter,
  Routes,
  Route,
  Link,Outlet
} from "react-router-dom";
1
2
3
4
5
6

2.3使用Router组件包裹整个应用

完整示例：

import React from 'react'
import ReactDOM from 'react-dom/client'

//1.导包
import {
  BrowserRouter,
  Routes,
  Route,
  Link,Outlet
} from "react-router-dom";


const First = () =>{
  console.log("first")
  return  (<p>第一条内容</p>)

}


const Home = () => (
  <div>
    <h1>路由</h1>
    {/* 2. 定义link就是超链接，跳转到指向的页面 */}
    <Link to='/first'>first</Link>
    {/* 若要显示子路由的内容，必须要有Outlet */}
    <Outlet />
  </div>
)


const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
  //渲染
  //3.定义路由路径
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />}>
        {/* } /> */}
      </Route>
      <Route path='/first' element={<First />} />
    </Routes>
  </BrowserRouter>
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

效果：

点击first跳转到另一个页面：

2.4 子路由

Route 下面可以有子路由，子路由的全路径=父路由路径+子路由路径。
父路由下必须包含才能在父页面下展示子页面。

2.5 HashRouter

不推荐。HashRouter是使用URL的hash值实现，会使浏览器的地址根目录以#开头，其他看不出差别。
只需要将BrowserRouter换成HashRouter标签即可，其他无需改动。

2.6 Link标签

会被编译成一个a标签。to属性编译成href。