React — 路由

萬事順意發表於2024-03-12
React路由

一、路由的使用

1.安裝react-router-dom

npm i react-router-dom

2.配置

（1）建立router例項物件並且配置路由對應關係

（2）路由繫結

import {createBrowserRouter,RouterProvider} from 'react-router-dom'

//（1）建立router例項物件並且配置路由對應關係
const router = createBrowserRouter([
  {
    path : '/login',
    element:<div>我是登入頁面</div>
  },
  {
    path : '/article',
    element:<div>我是文章頁面</div>
    },
])

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* 路由繫結 */}
    <RouterProvider router={router}>

    </RouterProvider>
  </React.StrictMode>
);

二、路由模組封裝

1.建立page資料夾

2.建立router資料夾

import Login from "../page/Login";
import Article from "../page/Article";

import { createBrowserRouter } from "react-router-dom";

const router = createBrowserRouter([
    {
        path : '/login',
        element : <Login></Login>
    },
    {
        path : '/article',
        element : <Article></Article>
    }
])

export default router

3.應用入口檔案渲染

import {createBrowserRouter,RouterProvider} from 'react-router-dom'

import router from './router';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    
    <RouterProvider router={router}>

    </RouterProvider>
  </React.StrictMode>
);

三、路由導航

1.宣告式導航

說明：宣告式導航是指在模板中透過<Link/>元件描述要跳轉到哪裡

語法：<Link to=''/article''>跳轉</Link>

使用場景：選單

import { Link } from "react-router-dom"

const Login = ()=>{
    return <>
        <div>
            Login頁面
            <Link to="/article">跳轉文章</Link>
        </div>
    
    </>
}
export default Login

2.程式設計式導航

說明：程式設計式導航是指透過‘useNavigate’鉤子得到導航方法，然後透過呼叫方法以命令的形式進行路由跳轉

語法：const navigate=uaeNavigate() navigate('/article')

使用場景：登入後跳轉

import { Link,useNavigate } from "react-router-dom"
const Login = ()=>{
    const navigate = useNavigate()
    return <>
        <div>
            <button onClick={()=>navigate('/article')}>命令式跳轉2</button>
        </div>
    </>
}
export default Login

四、導航傳參

1.searchParams傳參

        <div>
        
            <button onClick={()=>navigate('/article?id=1001&name=jack哈啊哈')}>傳參</button>
        </div>    

//傳參方：?分割引數 引數用&連線多個引數
import { useSearchParams } from "react-router-dom"
const Article = ()=>{
   const [params] = useSearchParams()
   const id= params.get('id')
   const name= params.get('name')
    return <>
        <div>

            {id} + {name}
        </div>
    </>
}
export default Article

2.params傳參

const router = createBrowserRouter([
    {
        path : '/login',
        element : <Login></Login>
    },
    {
        path : '/article/:id/:name', //新增引數佔位符
        element : <Article></Article>
    }
])
 <button onClick={()=>navigate('/article/1001/jack')}>params傳參</button> //直接/+引數值
import { useParams, useSearchParams } from "react-router-dom"

const Article = ()=>{

    const params = useParams()
    const id = params.id
    const name = params.name

    return <>
        <div>

            {id} + {name}
        </div>
    
    </>
}

五、巢狀式路由

1.實現步驟

（1）使用children屬性配置路由巢狀關係

const router = createBrowserRouter([
    {
        path : '/',
        element : <Layout></Layout>,
        children :[{
            path : '/board',
            element : <Board></Board>
        },
        {
            path : '/about',
            element : <About></About>
        }]
    },
    {
        path : '/login',
        element : <Login></Login>
    },
    {
        path : '/article/:id/:name',
        element : <Article></Article>
    }
])

（2）使用<Outlet/>元件配置二級路由渲染位置

import { Link,Outlet } from "react-router-dom"

const Layout= ()=>{
    return <>
        <div>
            我是一級元件Layout
        </div>
        <div>

            <Link to='/board'> 皮膚</Link>
            <Link to='/about'> 關於</Link>
        </div>
        {/* 配置二級路由的出口 */}
    
        <Outlet></Outlet>
    </>
}

export default Layout

2.預設二級路由

{
        path : '/',
        element : <Layout></Layout>,
        children :[{
            index:true, //1.加index:true
            element : <Board></Board>
        },
        {
            path : '/about',
            element : <About></About>
        }]
    },
const Layout= ()=>{
    return <>
        <div>
            我是一級元件Layout
        </div>
        <div>
            <Link to='/'> 皮膚</Link> //2.路徑修改/
            <Link to='/about'> 關於</Link>
        </div>
        {/* 配置二級路由的出口 */}
    
        <Outlet></Outlet>
    </>
}

六、404路由配置

說明：當瀏覽器輸入url路徑在整個路由配置中都找不到對應的path，為了使用者體驗，展示404進行渲染

const router = createBrowserRouter([
    {
        path : '/',
        element : <Layout></Layout>,
        children :[{
            index:true,
            element : <Board></Board>
        },
        {
            path : '/about',
            element : <About></About>
        }]
    },
    {
        path : '*',
        element: <NotFound></NotFound>
    } //新增NotFound元件 使用*配置
])

七、路由模式

1.hash ：由react-dom中 createHashRouter建立（底層：監聽hashChange事件）

2.history：使用react-dom中 createBrowerRouter建立（底層：history物件+pushState事件）需要後端支援

相關文章