React Router v6 useRouteMatch 等效項

Question

使用 React Router v5 時，可以使用useRouteMatch獲取該路由的路徑（模式）。

const { path } = useRouteMatch();

React Router v6 提供了一個類似的鈎子useMatch ； 然而，這預計會收到您想要匹配的模式。

我會使用 React Router v5 hook 通過將當前路徑與已知參數組合來生成路由。

例如，如果我在電子商務應用程序的產品頁面上（假設/en/product/:id ）並且有指向相關產品的鏈接（ /en/product/1 ， /en/product/2 ...等），我以前可以這樣做：

const MyComponent = () => {
  const { path } = useRouteMatch();
  return (
    <div>
      <Link to={generatePath(path, { id: 1 })}>Related Product 1</Link>
      <Link to={generatePath(path, { id: 2 })}>Related Product 2</Link>
    </div>
  );
};

由於/en/product來自 API 並且未在代碼中的任何位置聲明，因此我希望根據當前路徑更新 URL。 如果用戶在/es/producto上，則鏈接將自動更新為/es/producto/1 。

我在 SO 上看到了建議使用matchRoutes的解決方案，但是感覺效率很低，尤其是因為路由是從外部 API 動態生成的。

const useCurrentPath = () => {
  const location = useLocation()
  const [{ route }] = matchRoutes(routes, location)

  return route.path
}

我創建了一個小演示來說明它過去是如何工作的：

代碼沙盒演示

Answer 1

在react-router-dom@6中，沒有替代 v5 的useRouteMatch掛鈎。 鏈接和路由不再需要關心path模式，因為它們可以簡單地使用相對路由和鏈接。 它可以簡單地相對於當前匹配的路徑進行導航，而不是嘗試訪問路由的路徑模式。

例子：

這從"/route-a/2"導航到"/route-a/2/../1"或者更確切地說是"/route-a/1" 。

const { pathname } = useLocation();
const { id } = useParams();

// if there is a current subroute id && a related sibling id to navigate to
{id && RELATED_ID && (
  <Link to={`${pathname}/../${RELATED_ID}`}>
    Go to Nested Route {RELATED_ID}
  </Link>
)}

完整代碼：

import {
  BrowserRouter,
  Link,
  Route,
  Routes,
  useParams,
  useLocation
} from "react-router-dom";
import "./styles.css";

const RELATED_ID = 1;

const MyComponent = ({ title }) => {
  const { pathname } = useLocation();
  const { id } = useParams();
  return (
    <div>
      <h1>
        {title} {id}
      </h1>
      <pre>{pathname}</pre>
      {id && RELATED_ID && (
        <Link to={`${pathname}/../${RELATED_ID}`}>
          Go to Nested Route {RELATED_ID}
        </Link>
      )}
    </div>
  );
};

export default function App() {
  return (
    <div className="app">
      <BrowserRouter>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/route-a">Route A</Link>
          <Link to="/route-b">Route B</Link>
          <Link to="/route-a/1">Nested Route A1</Link>
          <Link to="/route-a/2">Nested Route A2</Link>
          <Link to="/route-b/1">Nested Route B1</Link>
          <Link to="/route-b/2">Nested Route B2</Link>
        </nav>
        <Routes>
          <Route
            path="/route-b"
            element={<MyComponent title="Nested Route" />}
          />
          <Route
            path="/route-a"
            element={<MyComponent title="Nested Route" />}
          />
          <Route
            path="/route-b/:id"
            element={<MyComponent title="Nested Route" />}
          />
          <Route
            path="/route-a/:id"
            element={<MyComponent title="Nested Route" />}
          />
          <Route path="/" />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

Answer 2

在 react-router-dom v5 中

// Receive the matched url of the current <Route/>
const { url } = useRouteMatch();

在 react-router-dom v6 中

const url = useResolvedPath("").pathname;