Lun's Blog

React: React Router DOM v6.3.X

You-Lun Lin's photo
You-Lun Lin
·

2 min read

🚨 這不是 v6.4.X 的筆記

這篇接續之前的v5筆記，考慮到v6.4有許多更新，所以這篇只先記錄v6.3.0的一些小改動。

React Router DOM v6.3.0

安裝指令：

$ npm i react-router-dom@6


Component

Overview

  • <Routes>
    • replace v5:
  • <Route path="" element={ <Component /> } />
    • delete v5: exact prop
  • <NavLink />
    • delete v5: activeClassName prop
  • <Navigate to="" /> or <Navigate to="" replace />
    • replace v5:
  • Delete , usePrompt(), useBlocker()

&

  • <Routes>： 取代v5的
  • <Route element={<Component />}/>：改成將component放進element屬性，而不是過去的巢狀結構；
  • 沒有exact屬性：v6.x預設是exact match，所以刪除v5的exact屬性
  • v6.x 版本範例如下：
      export default function App(){
      return
      (<Routes>
          <Route path="/home" element={<Home/>} />
          <Route path="/about" element={<About/>} />
          <Route path="/interests" element={<Interests/>} />
          <Route path="/interests/reading" element={<Reading/>} />
      </Routes>);
  }

  • Relative path

    • v5的巢狀路由(nested routes)或是都要明確把parent component的path寫進path，例如：/books/book-id。

    • v6則要在parent component的path加上wildcard /*，如範例的/books/*；而nested component則可省略parent component的path，如範例中的/book-id：

      function BookStore(){
  // ...
  return (
      <Routes>
          <Route path="/books/*" element={<Books/>} />
      </Routes>
  );
}

function Books(){
  // ...
  return (
       <Routes>
          <Route path="/book-id" element={<Book/>} />
      </Routes>
  )
}


  • <NavLink> 刪除v5的activeClassName屬性，可以直接用className屬性和component的狀態(state)定義樣式：
      NavLink className={state => state.isActive && classes.active}

  • v6.x 刪除v5的

  • <Navigate> 可以用來取代v5的 ，範例如下：

     // 預設以push模式導向至/home
 <Route path="/" element={<Navigate to="/home" />}>

 // 以replace模式導向至/home
 <Route path="/" element={<Navigate replace to="/home" />}>



Hook

Overview

  • useNavigate
    • replace v5: useHistory
  • useMatch
    • replace v5: useRouteMatch

useNavigate

  • useNavigate 是用來取代v5的useHistory

  • useNavigate 可直接輸入數值切換至上一頁/下一頁：正值代表forward、負值代表backword

      import { useNavigate } from 'react-router-dom';

  navigate(1)    // Forward to the next page
  navigate(-1)   // Backword to the last page

  • useNavigate() 預設是push模式導向其他路徑，也可輸入參數{replace: true} 以replace模式導向至其他路徑

      import { useNavigate } from 'react-router-dom';

  export default function Form(){
      // ...
      const navigate = useNavigate();

      const submitForm = () => {
          // Prevent prompting message when the form is submitted
          setIsFormFocused(true);

          // *Direct to root page in replace mode
          navigate('/');

          // note. Direct to root page in push mode (default)
          // navigate('/', {replace: true})
      }

      return (<>
          <form>
              {/* ... */}
              <button onClick={submitForm}>Submit</button>
          </form>
      </>);
  }


useMatch

  • useMatch({ end }) 取代 useRouteMatch({ strict })
  • useMatch({ caseSensitive }) 取代 useRouteMatch({ sensitive })

Nested Routes

v6有兩種巢狀路由的寫法

  1. child component的路由寫在parent component內，如範例的 <Route path="/book-id" element={<Book/>}> 是寫在Books component裡：

     function BookStore(){
     // ...
     return (
         <Routes>
             <Route path="/books/*" element={<Books/>} />
         </Routes>
     );
 }

 function Books(){
     // ...
     return (
          <Routes>
             <Route path="/book-id" element={<Book/>} />
         </Routes>
     )
 }


  2. 第二種則是把child component的路由直接寫在parent component的路由<Route></Route>裡面

     function BookStore(){
     // ...
     return (
         <Routes>
             <Route path="/books/*" element={<Books/>}>
                 <Route path="/book-id" element={<Book/>}/>
             </Route>
         </Routes>
     );
 }


References Upgrade to React Router v6 React-Router-DOM DOCs React-Router-DOM v6.3 DOCs React - The Complete Guide (incl Hooks, React Router, Redux)

React