React：如何在每次路線更改時獲取當前路線路徑？ React-router v5

Question

下面的代碼給出了基本路線而不是嵌套路線，或者我可以說當前路線

function test() {
  const route = useRouteMatch();
  useEffect(() => {
    console.log(route);
  }, [route]);
}

我在這里需要像 'base/user/:id' 而不是 'base/user/:123' 這樣的路徑

Answer 1

您有正確的鈎子來獲取匹配/呈現路線時使用的path 。

useRouteMatch

useRouteMatch掛鈎嘗試以與<Route>相同的方式匹配當前 URL。 它主要用於在不實際渲染<Route>的情況下訪問匹配數據。

匹配

匹配 object 包含有關<Route path>如何匹配 URL 的信息。 match對象包含以下屬性：

• params - (object) 從 URL 解析出來對應路徑的動態段的鍵/值對
• isExact -（布爾值）如果匹配整個 URL（無尾隨字符）則為真
• path - (string) 用於匹配的路徑模式。 用於構建嵌套的<Route> s
• url -（字符串）URL 的匹配部分。對於構建嵌套<Link>很有用

useRouteMatch掛鈎返回match項 object，其path屬性是用於匹配的路徑。

<Route path="/base/user/:id" component={Test} />

...

function Test() {
  const { path } = useRouteMatch();
  useEffect(() => {
    console.log(path); // "/base/user/:id"
  }, [path]);

  return null;
}