React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > react-router-dom v6使用

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

作者:Rise_11

本文主要介绍了react-router-dom v6版本基本使用介绍,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

Routes

Route

        <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

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

NavLink

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>

路由传参

编程式导航

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

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

您可能感兴趣的文章:
阅读全文