Ch05 Router
Yang Haoran 5/11/2022 react
# Router
https://reactrouter.com/
注意路由版本有区别，这里使用目前最新的6版本
npm install react-router-dom@6
1
新建几个目录以及路由组件如下图所示：
在router的index.jsx里面写：
/**
* App -> Home, Detail, List
* react-router-dom 中有两种模式：
* BrowserRouter(History模式)，
* HashRouter(Hash模式)部署的时候可以直接打包上线
*/
import App10 from "../App10";
import Home from "../Pages/Home";
import Detail from "../Pages/Detail"
import List from "../Pages/List";
import { BrowserRouter, Routes, Route } from "react-router-dom";
//定义一个路由, 注意element里面是尖括号，根元素包含其他元素
const baseRoute = () => (
<BrowserRouter>
<Routes>
<Route path='/' element={<App10/>}>
<Route path="/home" element={<Home/>}></Route>
<Route path="/list" element={<List/>}></Route>
<Route path="/detail" element={<Detail/>}></Route>
</Route>
</Routes>
</BrowserRouter>
)
export default baseRoute
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
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
在主index中，直接写Route
import ReactDOM from "react-dom";
import App10 from './App10'
// import store from './store'
// import {Provider} from "react-redux"
import Route from './router'
ReactDOM.render(
<Route/>,
document.getElementById("root")
)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
在app10.jsx中，设置显示子路由：
import React from 'react'
import { Outlet } from 'react-router-dom'
export default function App10() {
return (
<div>
<h3>BUBU</h3>
<div>
<Outlet/>
</div>
</div>
)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
效果：
# Link
无序列表快捷键：
ul>li*3>a 会自动生成如下
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
1
2
3
4
5
2
3
4
5
可以使用link来跳转，取代a标签，搭配的不是href，是to
import React from 'react'
import { Outlet,Link } from 'react-router-dom'
export default function App10() {
return (
<div>
<h3>BUBU</h3>
<ul>
<li><Link to="/home">HOME</Link></li>
<li><Link to="/detail">DETAIL</Link></li>
<li><Link to="/list">LIST</Link></li>
</ul>
<hr/>
<div>
<Outlet/>
</div>
</div>
)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
效果：
# UseLocation
可以得到用户当前路径
# UseNevigate
可以使用这个函数进行跳转, 也可以携带复杂参数：
import React from 'react'
import { Outlet,Link,useLocation, useNavigate } from 'react-router-dom'
export default function App10() {
const nevigate = useNavigate()
//可以通过这个钩子函数进行跳转
const location = useLocation()
//可以通过这个钩子函数获得当前的路径
console.log(location.pathname)
//携带参数
const goDetail = ()=>{
nevigate("/detail",{
state:
{username: 'bubu'}
})
}
return (
<div>
<h3>BUBU</h3>
<ul>
<li><Link to="/home">HOME</Link></li>
<li><Link to="/detail">DETAIL</Link></li>
<li><Link to="/list">LIST</Link></li>
</ul>
<button onClick={goDetail}>GoDetail</button>
<hr/>
<div>
<Outlet/>
</div>
</div>
)
}
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
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
获取参数：Detail.jsx
import React from 'react'
import { useLocation } from 'react-router-dom'
export default function Detail() {
return (
<div>This is Detail{useLocation().state.username}</div>
)
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
在跳转的时候如果要携带参数，可以使用useParams
app10.jsx
const goList = ()=>{
nevigate("/list/123")
}
1
2
3
2
3
route-->index.jsx 表示后面要传进来一个id值
<Route path="/list/:id" element={<List/>}></Route>
1
page-->List.jsx 可以在这里面获取参数
import React from 'react'
import { useParams } from 'react-router-dom'
export default function List() {
const param = useParams()
return (
<div>This is List{param.id}</div>
)
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
用问号携带的参数应该用useSearchParam来获取
<li><Link to="/detail?id=123">DETAIL</Link></li>
1
detail.jsx
import React from 'react'
import {useSearchParams} from 'react-router-dom'
export default function Detail() {
const [params] = useSearchParams()
return (
<div>This is Detail{params.getAll('id')[0]}</div>
)
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
空指针排错可以使用：三元运算判断存不存在
404页面处理：在路由中加一行，并且新建一个error页面
<Route path="*" element={<Error/>}></Route>
1
react不支持直接src等于路径，所以在引入图片的时候必须import
import React from 'react'
import errorPage from '../assets/404.jpeg'
export default function Error() {
return (
<div>404
<img src={errorPage} />
</div>
)
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
