React Router 路由

11/9/2022 前端react
(adsbygoogle = window.adsbygoogle || []).push({});

# 1. 简介

https://react-router.docschina.org/ 分三个版本: web native anywhere

yarn add react-router-dom@6
1

# 2. 基础应用

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

const Home = () => {
    return (<div>Home组件</div>)
}
const About = () => {
    return (<div>About组件</div>)
}
const Luyou = () => {
    return (<div>
        <BrowserRouter>
            <Link to="/">首页</Link>
            <Link to="/about">关于</Link>
            <Routes>
                <Route path='/' element={<Home/>}></Route>
                <Route path='/about' element={<About/>}></Route>
            </Routes>
        </BrowserRouter>
    </div>)
}

export default Luyou
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

BrowserRouter 基于h5的api浏览器地址替换 HashRouter 监听url hash值,有#号

# 3. 编程式导航








 
















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

const Home = () => {
    return (<div>Home组件</div>)
}
const About = () => {
    const navigate = useNavigate()
    return (<div>About组件,跳转到<button onClick={()=>navigate('/home')}>Home </button></div>)
}
const Luyou = () => {
    return (<div>
        <BrowserRouter>
            <Link to="/">首页</Link>
            <Link to="/about">关于</Link>
            <Routes>
                <Route path='/home' element={<Home/>}></Route>
                <Route path='/about' element={<About/>}></Route>
            </Routes>
        </BrowserRouter>
    </div>)
}

export default Luyou
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 5. 路由传参






 





 





 










import { BrowserRouter, Routes, Route, Link, useNavigate,useParams, useSearchParams } from 'react-router-dom'

const Home = () => {
    const navigate = useNavigate()
    const [params] = useSearchParams()
    return (<div>Home组件,欢迎{params.get('userName')},跳转到 <button onClick={()=>{navigate('/about/1001')}}>About</button></div>)
}
const About = () => {
    const navigate = useNavigate()
    const params = useParams()

    return (<div>About组件,{params.id},跳转到<button onClick={()=>navigate('/home?userName=PanXin')}>Home </button></div>)
}
const Luyou = () => {
    return (<div>
        <BrowserRouter>
            <Link to="/">首页</Link>
            <Link to="/about/:id">关于</Link>
            <Routes>
                <Route path='/home' element={<Home/>}></Route>
                <Route path='/about/:id' element={<About/>}></Route>
            </Routes>
        </BrowserRouter>
    </div>)
}

export default Luyou
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

# 6. 嵌套路由

import React from 'react';
import { Routes, Route, BrowserRouter} from 'react-router-dom'
import { Layout, Article, Board,NotFound  } from './luyou/qt';
function App() {
  return (
    <div >
      <BrowserRouter>
        <Routes>
          <Route path='/' element={<Layout />} >
            <Route index element={<Board />} />
            <Route path='article' element={<Article />} />
          </Route>
          <Route path='*' element={<NotFound />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { Link, Outlet } from "react-router-dom"

const Layout = () => {
    return (<div>Layout
        <Link to="/">board</Link>
        <Link to="/article">article</Link>
        <Outlet />
        Layout
    </div>)
}
const Board = () => {
    return (<div>Board
    </div>)
}
const Article = () => {
    return (<div>Article
    </div>)
}

const NotFound = () => {
    return (<div>NotFound
    </div>)
}
export {Layout, Board, Article, NotFound}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 7. 集中路由

import React from 'react';
import { BrowserRouter, useRoutes} from 'react-router-dom'
import { Layout, Article, Board,NotFound  } from './luyou/qt';

const routerList = [
  {
    path: '/',
    element: <Layout/>,
    children: [
      {
        element: <Board/>,
        index: true
      },
      {
        path: 'article',
        element: <Article />
      }
    ]
  },
  {
    path: '*',
    element: <NotFound/>
  }
]

function WrapperRouters(){
  let element = useRoutes(routerList)
  return element
}

function App() {
  return (
    <div >
      <BrowserRouter>
        <WrapperRouters/>
      </BrowserRouter>
    </div>
  );
}

export default App;
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