【React从0开始】路由篇

笔记为React入门到实战(2022全网最新）课程笔记

基础

安装

使用vite创建React项目

$ npm create vite react-router --template react
$ npm install react-router-dom@6

• react-router：为 React 应用提供了路由的核心功能；
• react-router-dom：基于 react-router，加入了在浏览器运行环境下的一些功能。

内置核心组件

• BrowerRouter
  包裹整个应用，一个React应用只需要使用一次
• Link
  用于指定导航链接，完成声明式的路由跳转
• Routes
  提供一个路由出口，组件内部会存在多个内置的Route组件，满足条件的路由会被渲染到组件内部
  -Route
  用于定义路由路径和渲染组件的对应关系 [element：因为react体系内 把组件叫做react element]
  • path
  • element

编程式导航

通过js编程的方式进行路由页面跳转，比如说从首页跳转到关于页
使用useNavigate钩子

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

路由传参

1. query？
   navigate()'/about?id=1000
   取参：

let [params] = useSearchParams()
let id = params.get('id')

2. params传参
   `navigate(‘about/1001/’)
   取参：

let params = useParams()
let id = params.id

嵌套路由

页面内的子路由

1. App.js中定义嵌套路由声明
2. Layout组件内部通过 指定二级路由出口
3. 给默认二级路由标记index属性
4. 把原本的路径path属性去掉

<Routes>
  <Route path="/"  element={<Layout/>}>
    <Route index element={ <Board/> } />
    <Route path="article" element={ <Article/> } />
  </Route>
</Routes>

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

const Layout = () => {
  return (
    <div>
      layout
      { /* 默认二级不再具有自己的路径  */ }
      <Link to="/">board</Link>
      <Link to="/article">article</Link>
      { /* 二级路由出口 */ }
      <Outlet/>
    </div>
  )
}

404路由配置

在所有匹配的路由后加入
<Route path="*" element={<NotFound />}></Route>

集中管理路由

使用useRoutes钩子，使用js对象定义Route元素。

// 1. 准备一个路由数组 数组中定义所有的路由对应关系
const routesList = [
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        element: <Board />,
        index: true, // index设置为true 变成默认的二级路由
      },
      {
        path: 'article',
        element: <Article />,
      },
    ],
  },
  // 增加n个路由对应关系
  {
    path: '*',
    element: <NotFound />,
  },
]

// 2. 使用useRoutes方法传入routesList生成Routes组件
function WrapperRoutes() {
  let element = useRoutes(routesList)
  return element
}