React Router v4：如何配置根级动态且第二个可选的两层路由？

我来帮你排查这个路由配置的问题。你的思路方向是对的，但可能有几个细节没处理到位，导致访问/vishal这类路径时出现异常。下面一步步帮你解决：

正确的路由配置示例（React Router v5） #

首先确认你使用的是react-router-dom v5及以上版本（这个版本才支持可选参数语法），调整后的完整配置如下：

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

// 示例组件
const CompOne = () => <div>首页组件</div>;
const Details = ({ match }) => {
  const { name, id } = match.params;
  return (
    <div>
      <p>名称：{name}</p>
      {/* 处理id为undefined的情况，避免报错 */}
      {id && <p>ID：{id}</p>}
    </div>
  );
};

function App() {
  return (
    <Switch>
      {/* 根路由必须加exact，否则会匹配所有以/开头的路径 */}
      <Route exact path="/" component={CompOne} />
      {/* 可选参数路由，注意放在根路由之后 */}
      <Route path="/:name/:id?" render={(routeProps) => <Details {...routeProps} />} />
    </Switch>
  );
}

export default App;

可能导致问题的原因及修复方案 #

• React Router版本过低：如果你的版本是v4或更早，:id?这种可选参数语法是不支持的。可以通过npm list react-router-dom查看版本，若低于v5，建议升级到v5或v6（v6的写法有较大变化，下面单独说明）。
• 组件未处理id为undefined的情况：访问/vishal时，match.params.id是undefined，如果你的Details组件直接使用id（比如写{id.length}），会因为undefined没有对应的属性而报错，必须先判断id是否存在再使用。
• 路由顺序错误：虽然你的根路由加了exact，但如果把可选参数路由放在根路由之前，Switch会优先匹配它（不过/:name需要至少一个参数，根路由/不会被误匹配，但为了规范，还是把更具体的路由放在后面）。

如果你使用的是React Router v6 #

v6版本彻底重构了路由系统，不再支持Switch和render属性，改用Routes和Route，可选参数的语法保留，但配置方式不同：

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

// 示例组件
const CompOne = () => <div>首页组件</div>;
const Details = () => {
  // v6中用useParams钩子获取参数
  const { name, id } = useParams();
  return (
    <div>
      <p>名称：{name}</p>
      {id && <p>ID：{id}</p>}
    </div>
  );
};

function App() {
  return (
    <Routes>
      <Route path="/" element={<CompOne />} />
      <Route path="/:name/:id?" element={<Details />} />
    </Routes>
  );
}

测试验证 #

配置正确后，以下路径都能正常匹配：

• localhost:8080/ → 渲染CompOne组件
• localhost:8080/vishal → 渲染Details组件，name为vishal，id为undefined
• localhost:8080/vishal/123 → 渲染Details组件，name为vishal，id为123

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