react-router基本使用

react-router 的基本使用

react-router-dom

react-router 提供了路由核心 api。如 Router, Route, Switch 等，但没有提供有关 dom 操作进行路由跳转的 api。
react-router-dom 提供了 BrowserRouter、Route、Link 等 api，可以通过 dom 操作触发事件控制路由。
react-router-dom 中依赖了 react-router，所以安装的时候只要安装 react-router-dom。
安装

npm install react-router-dom --save
1

如果安装版本在 >=6， Switch -->Routes
v5 版本的文档: https://v5.reactrouter.com/web/guides/quick-start
v6 git 地址: https://github.com/remix-run/react-router

基本集成步骤

1. 在 index.js 中

import { BrowserRouter } from "react-router-dom";
root.render(
  
    
      
    
  
);
1
2
3
4
5
6
7
8
9

2. app.js 文件

import { Routes, Route, Outlet, Link } from "react-router-dom";
// 其中 Routes 相当于v5的 Switch ,Outlet嵌套路由,index 配置默认首页路由


  
    }>
    }>
    } />
  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

以上是基本路由配置
3. 页面中匹配子路由
修改 app.js中的路由配置，新增tabs,在tabs页面中新增两个子路由tabOne,tabTwo
注：tabs路由配置path=“/tabs/*”，一定加 *，否则无法匹配到子路由

  }>
  }>
  }>
  } />

1
2
3
4
5
6

tabs 页面配置，默认展示tabOne页面

const Tab = function () {
  return (
    

      
      

        
          }>
          }>
        
      
    
  )
}
// 因为 添加的是 tabs/* 所以 }> path的/不能省略
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

3.1 嵌套路由，见github 中example/basic/src/App.tsx

以下为完整代码
app.jsx

function App () {
  // 整体接口 左边是菜单，右边是详细的针对布局
  return (
    

      
      

        
          }>
          }>
          {/* 根据下面自己路由进行 切换 */}
          }>
          } />
        
      
    
  );
}
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

其中 Route 中 index 为默认渲染页面，tabs/*代码下面有子路由
tabs页面

import tabs from "@/style/tab.module.scss"
import OneTabChild from './tabChilds/one'
import TwoTabChild from './tabChilds/two'
import { Route, Routes, Link, Outlet } from "react-router-dom"

const Tab = function () {
  return (
    

      
      

        
          }>
          
          {/* 嵌套路由使用方法 */}
          }>
            
              }
              />
              } />
            
          
        
      
    
  )
}

function TabOne () {
  return 
这是tabOne

  
}

function TabTwo () {
  return (
    
这是tabTwo
      
      {/* 这是渲染嵌套路由的例子 */}
      
    
  )
}

export default Tab
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64