React Router组件间相对路由编写：子组件如何匹配父级路由前缀

你当前使用的是React Router v5版本，可以通过内置的useRouteMatch钩子自动获取当前组件挂载的父级基础路径，无需硬编码路径前缀，实现步骤如下：

1. 导入依赖 #

在PointAndClickGame.tsx头部引入所需钩子和组件：

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

2. 改写组件路由逻辑 #

在组件内部调用useRouteMatch获取父级路由匹配信息，用返回的match.path作为子路由的路径前缀：

const PointAndClickGame = (props) => {
  // 自动获取当前父级路由的匹配信息，match.path就是你需要的base_path
  const match = useRouteMatch();
  // 保留你原有业务逻辑，比如setExitGameHandler的定义等

  return (
    <div className="PointAndClickGame">
      <Menu />
      {/* 加Switch避免路由匹配冲突 */}
      <Switch>
        <Route exact path={match.path}>
          <GameStart 
            gameAnswers={props.gameAnswers} 
            correctAnswer={props.correctAnswer} 
            setExitGameHandler={setExitGameHandler} 
          />
        </Route>
        <Route path={`${match.path}/gameinfo`}>
          <GameInfo/>
        </Route>
        <Route path={`${match.path}/gamefinish`}>
          <GameFinish/>
        </Route>
      </Switch>
    </div>
  );
}

3. 路由跳转适配 #

如果组件内需要做路由跳转，统一用match.url作为跳转路径的前缀，示例如下：

{/* 跳转到base_path/gameinfo，自动适配/pointandclick或者/pointandclick1 */}
<Link to={`${match.url}/gameinfo`}>查看游戏说明</Link>

如果你使用的是类组件无法使用Hook，可以直接从组件props中获取match对象（父级Route渲染的组件会默认注入该属性），用法和上述useRouteMatch返回的对象完全一致。

内容的提问来源于stack exchange，提问作者Octavian Niculescu