React Router路由参数失效求助：如何配置/message/id/:id路由？

Hey，我来帮你搞定这个React Router的路由参数问题！你要实现http://myurl.com/message/id/485这样的URL来展示消息，咱们先梳理下你两种配置的问题，再给你正确的解决方案。

你的两种配置存在的问题 #

第一种配置 #

你的第一个配置里，<Route path="/message/id/:id" component={ReadMessage}/>的路径写法其实是正确的，但如果参数没生效，大概率是你没在组件里正确获取路由参数，或者有没有其他路由的顺序拦截问题？咱们先看第二种配置的明显错误。

第二种配置 #

第二种嵌套路由的写法有两个关键错误：

• 子路由的路径写成了/:id，这是绝对路径，会直接匹配根路径下的:id，而不是父路由/message/id下的子路径，应该写成相对路径:id
• 嵌套路由的子Route通常应该放在父组件（也就是ReadMessage）内部，而不是直接写在路由配置的外层Switch里，否则无法正确继承父路由的路径上下文

正确的路由配置方案 #

方案1：非嵌套路由（最直接，适合你的需求） #

直接沿用你第一种配置的路径写法，确保路由顺序没问题（Switch是从上到下匹配，所以把精确匹配的路由放前面），然后在组件里正确获取参数：

const websiteRoutes = (
  <BrowserRouter>
    <div>
      <Switch>
        <Route path="/" component={Index} exact={true}/>
        <Route path="/admin" component={Admin}/>
        <Route path="/admin_panel" component={AdminPanel}/>
        {/* 这个路径完全匹配你要的URL格式 */}
        <Route path="/message/id/:id" component={ReadMessage}/>
        <Route path="/sitemap.xml"/>
        <Route path="/robots.txt"/>
      </Switch>
    </div>
  </BrowserRouter>
);

然后在ReadMessage组件里获取id参数：

• 如果是类组件或者不用Hooks的函数组件，用props.match.params.id：

function ReadMessage(props) {
  const messageId = props.match.params.id;
  return <div>查看消息ID：{messageId}</div>;
}

• 如果是用Hooks的函数组件，用useParams：

import { useParams } from 'react-router-dom';

function ReadMessage() {
  const { id } = useParams();
  return <div>查看消息ID：{id}</div>;
}

方案2：嵌套路由（适合需要父组件嵌套子组件的场景） #

如果你的/message/id本身也是一个独立页面（比如消息列表页），然后/message/id/:id是它的子页面（详情页），那可以用嵌套路由，正确写法如下：

首先是路由配置：

const websiteRoutes = (
  <BrowserRouter>
    <div>
      <Switch>
        <Route path="/" component={Index} exact={true}/>
        <Route path="/admin" component={Admin}/>
        <Route path="/admin_panel" component={AdminPanel}/>
        {/* 父路由不要加exact，这样才能匹配子路由 */}
        <Route path="/message/id" component={MessageParent}/>
        <Route path="/sitemap.xml"/>
        <Route path="/robots.txt"/>
      </Switch>
    </div>
  </BrowserRouter>
);

然后在MessageParent组件里添加子路由：

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

function MessageParent() {
  // 获取当前路由的匹配信息，用来拼接子路由路径
  const match = useRouteMatch();
  return (
    <div>
      {/* 这里可以放父组件的内容，比如消息列表 */}
      <h2>消息中心</h2>
      {/* 子路由路径用match.path来拼接，确保是相对路径 */}
      <Route path={`${match.path}/:id`} component={ReadMessage}/>
    </div>
  );
}

这样当访问/message/id/485时，会先渲染MessageParent，再在里面渲染ReadMessage，同样可以用上面的方法获取id参数。

额外注意点 #

• 确保你的React Router版本是v5（因为你用了Switch和component属性，v6里语法有较大变化）
• Switch组件会匹配第一个符合条件的路由，所以把精确匹配的路由（比如/）放在最前面，避免被其他路由拦截

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