详解react-router-dom v6版本基本使用介绍

目录

• Routes
• Route
• Navigate
• NavLink
• useRoutes
• 嵌套路由
• 路由传参
• 编程式导航

Routes

• 代替Switch组件,不会向下匹配
• 用来包裹Route

Route

• 必须被Routes组件包裹
• component属性变成element
• caseSensitive 路径大小写敏感属性，默认是不敏感（访问/about = /ABOUT）
• index 与path属性是互斥的，index表示为当前路由的根
• 可以用作layout组件，不写element属性，写了要与 Outlet组件配合使用（嵌套路由）

        <Routes>
          <Route path='/home' element={<Home />}></Route>
          <Route path='/about' element={<About />} caseSensitive={false} />
        </Routes>

        <Route path='/user'>
            <Route index element={<h1>user~</h1>} />
        </Route>

Navigate

• 用来代替Redirect组件
• replace属性 跳转模式 "PUSH" | "REPLACE"
• 只要这个组件一渲染就会发生跳转

        <Routes>
          <Route path='/home' element={<Home />}></Route>
          <Route path='/about' element={<About />} caseSensitive={false} />
          <Route path='*' element={<Navigate to='/home' />} />
        </Routes>

NavLink

• className，自定义激活时的样式名 可以为字符串或者函数
• end 匹配子路由时是否高亮
• caseSensitive 代表匹配路径时是否区分大小写

useRoutes

用来管理路由表，相比v5，可能需要借助一些第三方库来实现路由config管理，现在v6版本自带

const routes = useRoutes([
    {
      path: '/home',
      element: <Home />
    },
    {
      path: '/about',
      element: <About />
    },
    {
      path: '*',
      element: <Navigate to='/home' />
    },
    {
      path: '/user',
      children: [
        {
          index: true,
          element: <h1>user~</h1> // 这种不属于嵌套路由，这里面children会防到父亲的位置，所以不需要配合Outlet组件使用
        }
      ]
    }
  ])

嵌套路由

嵌套路由一般是配合 Outlet 组件使用，此组件类似于Vue的router-view组件，告知子路由应该渲染在什么位置

{
      path: '/home',
      element: <Home />, // 这种才属于嵌套路由
      children: [
        {
          path: 'message',
          element: <Message />
        },
        {
          path: 'article',
          element: <Article />
        }
      ]
}

在Home组件中使用<Outlet/>才能渲染子路由

      <div style={{ marginTop: '48px' }}>
        <div className='nav'>
          <div className='nav-item'>
            <NavLink to='/home/message'>message</NavLink>
          </div>
          <div className='nav-item'>
            <NavLink to='/home/article'>article</NavLink>
          </div>
          <div style={{ marginTop: 36 }}>
            <Outlet />
            {/* {outlet} */}
          </div>
        </div>
      </div>

路由传参

• params传参（useParams）
• search参数传参（useSearchParams）
• state传参 (useLocation，获取v5版本的location对象，如果直接输入可能state为null)

编程式导航

useNavigate

const navigate = useNavigate()

navigate('detail3', {

state: {

id: *item*.id,

content: *item*.content,

title: *item*.title

}

})

<button *onClick*={() => navigate(-1)}>back</button> 返回上一页

<button *onClick*={() => navigate(1)}>go</button> 前进

其他一些hooks

• useInRouterContext 判断组件是否被Router包裹，可能有些第三方组件需要判断
• useNavigationType 返回用户到当前页面的导航类型 "POP" | "PUSH" | "REPLACE";
  • 注意 POP是指在浏览器直接打开了这个路由组件（刷新页面）
• useOutlet 返回嵌套的路由，可以代替Outlet组件
• useResolvedPath 给定一个url，解析出path，hash，search（location对象）

到此这篇关于详解react-router-dom v6版本基本使用介绍的文章就介绍到这了,更多相关react-router-dom v6使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！