React Router 路由

# 1. 简介

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

代码语言：javascript复制

yarn add react-router-dom@6

# 2. 基础应用

代码语言：javascript复制

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

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

# 3. 编程式导航

代码语言：javascript复制

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

# 5. 路由传参

代码语言：javascript复制

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

# 6. 嵌套路由

代码语言：javascript复制

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;

代码语言：javascript复制

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}

# 7. 集中路由

代码语言：javascript复制

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;

api browser hash native url

0 人点赞