亲宝软件园·资讯

展开

react-router-dom v6使用

Rise_11 人气:1

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使用内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

加载全部内容

相关教程
猜你喜欢
用户评论