javascript - React Router v6 useRouteMatch 等效项

Question

使用 React Router v5 时，可以使用 useRouteMatch 获取该路由的路径(模式) .

const { path } = useRouteMatch();

React Router v6 提供了一个类似的钩子(Hook)，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
}

我创建了一个小演示来说明它过去是如何工作的:

Code Sandbox Demo

Answer 1

在 react-router-dom@6 中，v5 useRouteMatch 钩子(Hook)没有替代品。链接和路由不再需要关注 path 模式，因为它们可以简单地使用相对路由和链接。它可以简单地相对于当前匹配的路径进行导航，而不是尝试访问路由的路径模式。

例子:

这从 "/route-a/2" 导航到 "/route-a/2/../1" 或 "/route -a/1".

const { pathname } = useLocation();

// navigate to sibling route path
<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>
  );
}