React路由器的鉤子

React Router v5引入了強大的Hook機制，提供了四個便捷的路由Hook，簡化了路由管理。本文將快速入門React Router v5的新模式，首先介紹新的路由渲染模式，然後深入探討各個Hook的使用方法。

React Router v5之前的路由渲染

// 渲染路由並獲取路由屬性<route component="{Home}" path="/"></route>

// 傳遞額外屬性<route path="/" render="{({" match><profile match="{match}" mine="{true}"></profile>} /></route>

使用component語法時，路由屬性（ match 、 location和history ）會隱式傳遞給組件。但如果需要傳遞額外屬性，則必須改用render屬性。需要注意的是，在component語法中添加內聯函數會導致組件在每次渲染時重新掛載。

React Router v5之後的路由渲染

<route path="/"><home></home></route>

Home組件不再隱式接收路由屬性。但是，無需修改Route本身，就可以向Home組件添加任何額外屬性。避免了組件在每次渲染時重新掛載的問題，這是一種更簡潔高效的API設計。

由於路由屬性不再隱式傳遞，如何訪問match 、 history或location呢？是否需要用withRouter包裝所有組件？這就是Hook發揮作用的地方。

請注意，Hook是在React 16.8版本中引入的，因此需要使用16.8或更高版本的React。

useHistory Hook

• 提供對React Router中history屬性的訪問。
• 指向路由使用的history包依賴項。
• 主要用於通過函數進行編程式路由，例如push 、 replace等。

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

function Home() {
  const history = useHistory();
  return <button onclick="{()">history.push('/profile')}>Profile</button> ;
}

useLocation Hook

• 提供對React Router中location屬性的訪問。
• 類似於瀏覽器的window.location ，但它代表路由狀態和位置，可以在任何地方訪問。
• 主要用於訪問查詢參數或完整的路由字符串。

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

function Profile() {
  const location = useLocation();
  useEffect(() => {
    const currentPath = location.pathname;
    const searchParams = new URLSearchParams(location.search);
    // ... 使用currentPath 和searchParams
  }, [location]);
  return<p> Profile</p> ;
}

由於location屬性是不可變的， useEffect會在每次路由更改時調用函數，非常適合操作搜索參數或當前路徑。

useParams Hook

• 提供對URL中參數的訪問。
• 此功能之前只能通過match.params實現。

 import { useParams, Route } from 'react-router-dom';

function Profile() {
  const { name } = useParams();
  return<p> {name}'s Profile</p> ;
}

function Dashboard() {
  return (
    <div>
      <nav>
        <link to="{`/profile/ann`}">Ann's Profile
      </nav>
      <main>
        <route path="/profile/:name"><profile></profile></route>
      </main>
    </div>
  );
}

useRouteMatch Hook

• 提供對match對象的訪問。
• 如果不帶參數，則返回組件或其父組件中最接近的匹配項。
• 主要用於構建嵌套路徑。

 import { useRouteMatch, Route } from 'react-router-dom';

function Auth() {
  const match = useRouteMatch();
  return (
    <div>
      <route path="{`${match.url}/login`}"><login></login></route>
      <route path="{`${match.url}/register`}"><register></register></route>
    </div>
  );
}

useRouteMatch還可以用於在不渲染Route的情況下訪問match對象，方法是傳遞location參數。

例如，假設您需要在/profile渲染自己的個人資料，如果URL包含人員姓名（ /profile/dan或/profile/ann ），則渲染其他人的個人資料。如果不使用Hook，您需要編寫一個Switch ，列出兩條路由並使用props進行自定義。但現在，使用Hook可以這樣實現：

 import { Route, BrowserRouter as Router, Link, useRouteMatch } from 'react-router-dom';

function Profile() {
  const match = useRouteMatch('/profile/:name');
  return match ?<p> {match.params.name}'s Profile</p> :<p> My own profile</p> ;
}

export default function App() {
  return (
    <router>
      <nav>
        <link to="/profile">My Profile
        <br>
        <link to="{`/profile/ann`}">Ann's Profile
      </nav>
      <route path="/profile"><profile></profile></route>
    </router>
  );
}

您還可以將exact或sensitive等所有Route屬性作為對像傳遞給useRouteMatch 。

總結

Hook和顯式Route本身俱有隱藏的優勢。這些Hook有助於避免早期模式中出現的許多混亂和復雜性，減少了人為錯誤，使路由代碼更易於維護，並更容易升級到新的React Router版本。

以上是React路由器的鉤子的詳細內容。更多資訊請關注PHP中文網其他相關文章！