创建路由并使用

安装

npm install react-router-dom

创建路由页面

新建 src/router/index.js 路由配置文件

import Login from "../pages/Login/Login";
import List from "../pages/List/List";
import Home from "../pages/Home/Home";
import App from "../App"
import { createBrowserRouter } from "react-router-dom";
 
const router = createBrowserRouter([
    {
        path:'/',
        element:<App />
    },
    {
        path:'/login',
        element:<Login />
    },
    {
        path: '/list',
        element:<List />
    },
    {
        path: '/home',
        element:<Home />
    }
])
 
export default router

在 src/index.js 中注册

import router from "./router"
import { RouterProvider } from 'react-router-dom'

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

核心内置组件说明

BrowserRouter

作用: 包裹整个应用，一个React应用只需要使用一次

模式	实现方式	路由url表现
HashRouter	监听url hash值实现	http://localhost:3000/#/home
BrowserRouter	h5的 history.pushState API实现	http://localhost:3000/home

Link

作用: 用于指定导航链接，完成声明式的路由跳转,类似于 <router-link/>

<Link to="/list">去列表页面</Link>

Routes

作用: 提供一个路由出口，组件内部会存在多个内置的Route组件，满足条件的路由会被渲染到组件内部,类似于 <router-view/>

<Routes>
  {/* 满足条件的路由组件会渲染到这里 */}
  <Route path="/" element={<Home />}></Route>
  <Route path="/about" element={<About />}></Route>
</Routes>

Route

作用: 用于定义路由路径和渲染组件的对应关系 element：因为react体系内把组件叫做react element

 <Route path="/" element={<Home />}></Route>

路由导航

声明式导航

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

const Login = () => {
    return (
    <div>
        我是登录页
        {/* 声明式导航 */}
        <Link to="/list">去列表页面</Link>
    </div>
    )
}
 
export default Login

编程式导航

导入一个 useNavigate 钩子函数
执行 useNavigate 函数得到跳转函数
在事件中执行跳转函数完成路由跳转

// 导入useNavigate函数
import { useNavigate } from "react-router-dom"

const Login = () => {
    // 执行函数
    const navigate = useNavigate()
    return (
    <div>
        我是登录页
        {/* 编程式导航 */}
        <button onClick={() => navigate('/list')}>去列表页面</button>
    </div>
    )
}
 
export default Login

路由导航传参

使用searchParams传参

跳转页（发送参数）

<button onClick={() => navigate('/list?id=1001&name=追光的栗子')}>去列表页面</button>

目标页（接收参数）

import React from 'react'
import { useSearchParams } from "react-router-dom";  


function List() {
  const [params] = useSearchParams()
  const id = params.get('id')
  const name = params.get('name')

  return (
    <div>
      我是列表页
      {id} - {name}
    </div>
  )
}

export default List

使用params传参

跳转页（发送参数）

<button onClick={() => navigate('/list/100/追光的栗子')}>去列表页面</button>

目标页（接收参数）

import React from 'react'
import { useParams } from "react-router-dom";  


function List() {
    const params = useParams()
    const id = params.id
    const name = params.name

      return (
        <div>
          我是列表页
          {id} - {name}
        </div>
      )
}

export default List

需要配置 router/index.js

 {
    path: '/list/:id/:name',
    element:<List />
 }

嵌套路由

使用children属性配置路由嵌套关系
使用<Outlet/>组件配置二级路由渲染位置

页面配置

import { Link, Outlet } from "react-router-dom"
 
const Layout = () => {
    return (
        <div>
            <div> 我是一级路由Layout </div>
            <Link to="/layout">登录</Link>
            <br/>
            <Link to="/layout/about">关于</Link>
            <hr/>
            {/* 二级路由出口 */}
            <Outlet/>
        </div>
    )
}
 
export default Layout

路由文件配置

 {
        path: '/layout',
        element:<Layout  />,
        children:[
            {
                // 默认二级路由
                index: true,
                element:<Login />
            },
            {
                path:'about',
                element:<About />
            },
        ]
    }

404路由配置