路由

一个路径path对应唯一的一个组件comonent 当我们访问一个path 自动把path对应的组件进行渲染

# 创建react项目

yarn create vite react-router --template react

npx create-react-app react-router

# 安装所有依赖包

yarn

npm i

# 安装react-router包

yarn add react-router-dom@6

npm i react-router-dom@6

# 启动项目

yarn dev

npm run start

demo：

import React, {Suspense} from 'react'

import ReactDOM from 'react-dom/client'

import App from '@/App'

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

import 'normalize.css'

import '@/assets/css/index.less'

import router from '@/router'

import {Provider} from "react-redux"

import store from '@/store'

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(

<Suspense fallback={"loading..."}>

<Provider store={store}>

<RouterProvider router={router}>

<App/>

</RouterProvider>

</Provider>

</Suspense>

)

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

import React from 'react'

const Layout = React.lazy(() => import('@/views/Layout'))

const NotFound = React.lazy(() => import('@/components/NotFound'))

const Month = React.lazy(() => import('@/views/Layout/Month'))

const Year = React.lazy(() => import('@/views/Layout/Year'))

const New = React.lazy(() => import('@/views/New'))

const router = createBrowserRouter([

{

path: '/',

element: <Layout/>,

children: [

{

index: true,

element: <Month/>

},

{

path: 'year',

element: <Year/>

}

]

},

{

path: '/new',

element: <New/>

},

{

path: '*',

element: <NotFound/>

}

])

export default router

Link

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

这里to属性用于指定路由地址，表示要跳转到哪里去，Link组件最终会被渲染为原生的a链接

编程式导航

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

// 导入useNavigate函数

import { useNavigate } from 'react-router-dom'

const Home = () => {

// 执行函数

const navigate = useNavigate()

return (

<div>

Home

<button onClick={ ()=> navigate('/about') }> 跳转关于页 </button>

</div>

)

}

export default Home

路由传参

searchParams传参

params传参

嵌套路由

使用 Outlet 组件添加二级路由出口

默认二级路由

应用首次渲染完毕就需要显示的二级路由

实现步骤:

1. 给默认二级路由标记index属性
2. 把原本的路径path属性去掉

import { Outlet } from 'react-router-dom'

const Layout = () => {

return (

<div>

layout

{ /* 默认二级不再具有自己的路径 */ }

<Link to="/">board</Link>

<Link to="/article">article</Link>

{ /* 二级路由出口 */ }

<Outlet/>

</div>

)

}