使用 useRouteMatch - JavaScript

在 React 中，使用 useRouteMatch 钩子可以方便地获取当前 URL 与路由匹配的信息。这些信息包括路由路径、参数和查询字符串等，使得开发者可以更加灵活地根据 URL 渲染不同的组件。

import React from 'react';
import { useRouteMatch } from 'react-router-dom';

function MyComponent() {
  const match = useRouteMatch();

  return (
    <div>
      <h1>使用 useRouteMatch - JavaScript</h1>
      <p>当前路由路径: {match.path}</p>
      <p>当前 URL: {match.url}</p>
    </div>
  );
}

export default MyComponent;

上面的代码片段演示了如何使用 useRouteMatch 钩子获取当前 URL 与路由匹配的信息。其中，match.path 表示当前路由的路径，而 match.url 则表示当前 URL。注意，这两个值可能并不相同，例如在嵌套的路由中，当前 URL 中可能包含其他路由的路径信息。

useRouteMatch 钩子还可以接受一个对象作为参数，用于指定需要匹配的路由信息。

import React from 'react';
import { useRouteMatch } from 'react-router-dom';

function MyComponent() {
  const match = useRouteMatch({ path: '/users/:id', exact: true });

  return (
    <div>
      <h1>使用 useRouteMatch - JavaScript</h1>
      {match ? (
        <p>用户 ID: {match.params.id}</p>
      ) : (
        <p>未匹配到任何路由</p>
      )}
    </div>
  );
}

export default MyComponent;

上面的代码片段演示了如何使用 useRouteMatch 钩子匹配具有特定路径的路由。其中，path 参数指定需要匹配的路径，而 exact 参数表示是否需要精确匹配。匹配成功后，我们可以通过 match.params 对象访问 URL 中的参数信息。

总之，useRouteMatch 钩子是 React Router 中非常实用的一个钩子，它为我们在开发过程中更加灵活地根据 URL 渲染不同的组件提供了支持。