React - Router

1. 示例

https://github.com/suaxi/develop-relevant-notes/tree/main/front-end/React18/code/react-router-demo

2. 路由导航

（1）声明式路由导航

在模板中通过 <Link /> 组件描述要去哪里

const Login = () => {
  return (
    <div>
      登录
      {/* 声明式导航 */}
      <Link to="/article">跳转到文章页面</Link>
    </div>
  )
}

export default Login

语法说明：通过给组件的 to 属性指定要跳转的路由path，组件会被渲染为浏览器支持的 a 链接，如需要传参时，直接通过字符串拼接的形式即可

（2）编程式导航

指通过 useNavigate 钩子函数得到导航方法，然后通过调用方法以命令式的形式进行路由跳转

import { Link, useNavigate } from 'react-router-dom'
const Login = () => {
  const naigate = useNavigate()
  return (
    <div>
      登录
      {/* 声明式导航 */}
      <Link to="/article">跳转到文章页面</Link>
      {/* 编程式导航 */}
      <button onClick={() => naigate('/article')}>跳转到文章页面</button>
    </div>
  )
}

export default Login

语法说明：通过调用 navigate 方法传入路由 path 进行跳转

3. 路由传参

（1）searchParams 传参

naigate('/article?name="孙笑川"&age=33')

const [params] = useSearchParams()
const name = params.get('name')
const age = params.get('age')

（2）params 传参

naigate('/article/33')

// 绑定参数
const router = createBrowserRouter([
  {
    path: '/article/:name/:age',
    element: <Article />
  }
])

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

4. 嵌套路由

在一级路由中又嵌套了其他路由，这种关系就叫做嵌套路由

（1）实现步骤

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

{
  path: '/',
  element: <Layout />,
  children: [
    {
      path: 'board',
      element: <Board />
    },
    {
      path: 'about',
      element: <About />
    }
  ]
}

const Layout = () => {
  return (
    <div>
      <h1>一级路由 Layout</h1>
      <Link to="/board">看板</Link>
      <br />
      <Link to="/about">关于</Link>

      {/* 二级路由出口 */}
      <Outlet />
    </div>
  )
}

（2）默认二级路由

一般情况下，访问一级路由时，是不会渲染二级路由的，当去掉二级路由的 path，添加 index: true 属性时，访问一级路由时，会默认渲染出二级路由

{
  path: '/',
  element: <Layout />,
  children: [
    {
      // path: 'board',
      index: true,
      element: <Board />
    },
    {
      path: 'about',
      element: <About />
    }
  ]
}

5. 404 路由

当用户输入的 url 在整个路由配置中都找不到对应的 path 时，可以使用 404 兜底组件改善用户体验

（1）实现步骤

• 404 组件
• 在路由表数组的末尾，以 * 号作为路由 path 进行配置

const NotFound = () => {
  return (
    <div>
      <h1>404 Not Found</h1>
    </div>
  )
}

export default NotFound

{
  path: '*',
  element: <NotFound />
}

6. 两种路由模式

使用方式：创建路由时，通过切换 createBrowserRouter、createHashRouter Api 即可