react-router6.x路由配置及導(dǎo)航詳解

更新時間：2023年10月13日 09:03:57 作者：明知山_

這篇文章主要介紹了react-router6.x路由配置及導(dǎo)航,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

react-router6.x路由配置及導(dǎo)航

文檔地址

項目使用Vite進(jìn)行搭建

項目目錄

在這里插入圖片描述

安裝

npm install react-router-dom

router/index.jsx

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 /> },
]

App.jsx

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

main.jsx

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')
)

如果是嵌套路由需要加上<Outlet />標(biāo)簽

Home.jsx

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>
    )
}

路由導(dǎo)航

攜帶一個參數(shù)id=1到home頁

import { Link, useNavigate } from "react-router-dom"
export default () => {
    let navigate = useNavigate()
    return (
        <div>
            <Link to="/home?id=1">a標(biāo)簽跳轉(zhuǎn)</Link>
            <button onClick={() => navigate("/home?id=1")}>編程式跳轉(zhuǎn)</button>
        </div>
    )
}

通過useSearchParams可以獲取鏈接上的id

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>
    )
}