react-router6.x路由配置及导航详解

npm install react-router-dom

import Index from '@/pages/Index.jsx'
import Home from '@/pages/Home/Home.jsx'
import HomeLeft from '@/pages/Home/Home-left.jsx'
import HomeRight from '@/pages/Home/Home-right.jsx'
export default [
    {
        path: "/",
        element: <Index />,
    },
    {
        path: "/home",
        element: <Home />,
        children: [
            {
                index: true,
                element: <HomeLeft />
            },
            {
                path: '/home/home-right',
                element: <HomeRight />,
            }]
    },
    { path: "*", element: <Index /> },
]

import './App.less'
import React from 'react'
import { useRoutes } from "react-router-dom"
import router from "@/router"
function App() {
  const element = useRoutes(router)
  return (
    <div id='App'>
      {element}
    </div >
  )
}
export default App

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from "react-router-dom"
import App from './App'
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
)

import React from 'react'
import { Outlet, Link } from "react-router-dom"
export default () => {
    return (
        <div>
            <Link to="/home">左</Link> &nbsp;
            <Link to="/home/home-right">右</Link>
            <Outlet />
        </div>
    )
}

import { Link, useNavigate } from "react-router-dom"
export default () => {
    let navigate = useNavigate()
    return (
        <div>
            <Link to="/home?id=1">a标签跳转</Link>
            <button onClick={() => navigate("/home?id=1")}>编程式跳转</button>
        </div>
    )
}

import React from 'react'
import { Outlet, Link, useNavigate, useSearchParams } from "react-router-dom"
export default () => {
    let navigate = useNavigate()
    let [searchParams] = useSearchParams()
    console.log(searchParams.get("id")) //1
    return (
        <div>
            <button onClick={() => navigate(-1)}>后退</button>
            <br />
            <Link to="/home">左</Link> &nbsp;
            <Link to="/home/home-right">右</Link>
            <Outlet />
        </div>
    )
}