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

        <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>

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

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组件使用
        }
      ]
    }
  ])

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

      <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>

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> 前进