[Note] React: React Router DOM v 6.3.X

🚨 這不是 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: <Switch />
• <Route path="" element={ <Component /> } />
  • delete v5: exact prop
• <NavLink />
  • delete v5: activeClassName prop
• <Navigate to="" /> or <Navigate to="" replace />
  • replace v5: <Redirect />
• Delete <Prompt />, usePrompt(), useBlocker()
  
  

<Routes > & <Route >

• <Routes>： 取代v5的<Switch >
• <Route element={<Component />}/>：改成將component放進element屬性，而不是過去的巢狀結構；
• <Route > 沒有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)或是<Link >都要明確把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 >

• <NavLink> 刪除v5的activeClassName屬性，可以直接用className屬性和component的狀態(state)定義樣式：

    NavLink className={state => state.isActive && classes.active}
  

  
  

<Navigate >

• v6.x 刪除v5的 <Redirect >

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

   // 預設以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)