react-router-dom@6.x的使用

导航模式

hash模式

// src/index.js
import { HashRouter } from 'react-router-dom'
import App from './App'
root.render(
	<HashRouter>
    	<App></App>
    </HashRouter>
)

history方

// src/index.js
import { BrowserRouter } from 'react-router-dom'
import App from './App'
root.render(
	<BrowserRouter>
    	<App></App>
    </BrowserRouter>
)

声明方式1

嵌套子路由方式1

// App.js变化
<Routes>
    <Route path="/home" element={<Home />} />
    <Route path="/about" element={<About />} />
    {/*嵌套子路由*/}
    <Route path="/about/*" element={<About />} />
    {/*重定向页面*/}
    <Route path="/" element={<Navigate replace to="/home" />} />
</Routes>

// /src/components/About.jsx
import React from 'react'
import { Route, NavLink, Routes, Navigate } from 'react-router-dom'
import Email from './Email'
import Tel from './Tel'
export default function About() {
  return (
    <div className="about container">
      <h1 className="page-header">使用说明</h1>
      <p>通过此系统来熟悉 react 以及 react router 的使用</p>
      <div>
        <NavLink to="/about/email" className="navigation">邮箱</NavLink>
        <NavLink to="/about/tel" className="navigation">电话</NavLink>
      </div>
      <div>
        <Routes>
          <Route path='' element={<Navigate to='email' replace />} />
          <Route path='email' element={<Email />}/>
          <Route path='tel' element={<Tel />} />
        </Routes>
      </div>
    </div>
  )
}

嵌套子路由方式2

import { NavLink, Route, Routes, Navigate } from 'react-router-dom'
import './css/App.css'
import Home from './views/Home';
import About from './views/About';
import Email from './components/Email';
import Tel from './components/Tel';

function App() {
  return (
    <div className="App">
      <div>
        <NavLink to="/home" className="navigation">首页</NavLink>
        <NavLink to="/about" className="navigation">关于我</NavLink>
      </div>
      <Routes>
        <Route path='/home' element={ <Home /> } />
        <Route path='/about/*' element={ <About /> } >
          <Route path='email' element={ <Email /> } />
          <Route path='tel' element={ <Tel /> } />
          <Route path='' element={ <Navigate to="email" replace /> } />
        </Route>
        <Route path='/' element={ <Navigate to="/home" replace /> } />
      </Routes>
    </div>
  );
}

export default App;

// /src/components/About.jsx
import React from 'react'
import { Outlet, NavLink } from 'react-router-dom'

export default function About() {
  return (
    <div className="about container">
      <h1 className="page-header">使用说明</h1>
      <p>通过此系统来熟悉 react 以及 react router 的使用</p>
      <NavLink to="/about/email" className="navigation">邮箱</NavLink>
      <NavLink to="/about/tel" className="navigation">电话</NavLink>
      <Outlet />
    </div>
  )
}

声明方式2

常规路由和嵌套子路由

// router/index.js
import { useRoutes, Navigate } from 'react-router-dom'
import Home from '../components/Home'
import About from '../components/About'
import Email from '../components/Email'
import Tel from '../components/Tel'
function Router(props) {
  return useRoutes([
    {
      path: '/home',
      element: <Home />
    },
    {
      path: '/about',
      element: <About />,
      children: [
        {
          path: 'email',
          element: <Email />
        },
        {
          path: 'tel',
          element: <Tel />
        },
        {
          // 重定向到那个页面
          path: '',
          element: <Navigate replace to="email" />
        }
      ]
    },
    {
      // 重定向到那个页面
      path: '/',
      element: <Navigate replace to="/home" />
    },
  ])
}

export default Router;

路由跳转方式

声明式跳转

import { NavLink } from 'react-react-dom'
// ...省略相关代码
// NavLink生成的是a标签
return(
    <div>
        <NavLink to="/home">首页</NavLink>
    </div>
)

编程式跳转

import { useNavigate } from 'react-react-dom'
// ...省略相关代码
const navigate = useNavigate()
return(
    <div>
        <div onClick={() =>navigate('/home') }>去首页</div>
    </div>
)

路由传参

import { useNavigate } from 'react-router-dom'
// ...省略相关代码
const navigate = useNavigate()

// 返回上一级
navigate(-1)

// 去对应的用户详情
navigate(`/user/{id}`)

// 如果需要类比隐式传参，可以添加参数state
navigate('/home', {
    state: {
        alert: "删除学生成功",
        type: "info"
    }
})

// 如果需要类比 history.replace, 可以添加参数replace为true
navigate('/home', { replace: true })

// 同时 link 也添加了单独的参数 state
const state = {
     alert: "删除学生成功",
     type: "info"
}
<navLink to="/home" state={state} />

获取路由中的参数

获取prams参数

import { useParams } from 'react-router-dom'
// ...省略相关代码
const { id } = useParams()

获取query参数

import { useLocation } from 'react-router-dom'
// 获取隐式传参
const location = useLocation()
if(location) {
    //返回参数location.state ...做响应的逻辑判断
}