詳解react-router-dom v6版本基本使用介紹

2022-03-11 10:00:15

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使用內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！