基本用法

安装

pnpm i react-router-dom@6

使用

import { BrowserRouter, Link, Routes, Route } from 'react-router-dom';
import Home from './Home.jsx'
import About from './About.jsx'
function App() {
  return (
    <div className="App">
      <BrowserRouter>
        {/* <Link to="/" >首页</Link>
        <Link to="/about" >About</Link> */}
        <Routes>
          <Route path="/" element={<Home />}></Route>
          <Route path="/about" element={<About />}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  )
}
export default App

编程式导航

跳转

import { useNavigate } from 'react-router-dom';
function Login() {
  const navigate = useNavigate()
  function handleClick() {
    navigate("/about")
  }
  return (
    <h1 onClick={handleClick}>Login</h1>
  )
}

export default Login;

searchParams传参

http://127.0.0.1:5173/login?name=123

import { useSearchParams } from 'react-router-dom';
function Login() {
  const [params] = useSearchParams()
  console.log(params.get('name'))
  return (
    <h1>Login</h1>
  )
}

export default Login;

params传参

http://127.0.0.1:5173/login/123

import {  useParams } from 'react-router-dom';
function Login() {
  const params = useParams()
  console.log(params)
  return (
    <h1 >Login</h1>
  )
}
export default Login;

嵌套路由

实现

http://127.0.0.1:5173/login/sub2

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Login from './Login.jsx'
import LoginSub1 from './LoginSub1.jsx'
import LoginSub2 from './LoginSub1.jsx'
function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/login" element={<Login></Login>}>
            <Route path="sub1" element={<LoginSub1></LoginSub1>}></Route>
            <Route path="sub2" element={<LoginSub2></LoginSub2>}></Route>
          </Route>
        </Routes>
      </BrowserRouter>
    </div>
  )
}
export default App

import {  Outlet } from 'react-router-dom';
function Login() {
  return (
    <>
      <h1>Login</h1>
      <Outlet></Outlet>
    </>
  )
}
export default Login;

默认2级路由设置(使用index)

http://127.0.0.1:5173/login

import { BrowserRouter, Link, Routes, Route } from 'react-router-dom';
import Login from './Login.jsx'
import LoginSub1 from './LoginSub1.jsx'
import LoginSub2 from './LoginSub1.jsx'
function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/login" element={<Login></Login>}>
            <Route path="sub1" element={<LoginSub1></LoginSub1>}></Route>
            <Route index element={<LoginSub2></LoginSub2>}></Route>
          </Route>
        </Routes>
      </BrowserRouter>
    </div>
  )
}
export default App

404页面

http://127.0.0.1:5173/login2

<Routes>
  <Route path="/" element={<Home></Home>}></Route>
  <Route path="/about" element={<About></About>}></Route>
  <Route path="*" element={<NotFound></NotFound>}></Route>
</Routes>