React Router嵌套路由问题：/content路由头部显示不符合预期

问题场景 #

期望实现：

• 访问/content路径时，页面渲染Header和首页内容
• 访问/content/about路径时，仅渲染About页面且不显示Header
  当前代码未达到预期效果。

问题原因 #

1. Switch路由匹配顺序问题：Switch组件会优先匹配第一个符合条件的路由规则，原代码中path="/content"会匹配所有以/content开头的路径（包括/content/about），导致第二个路由/content/*永远不会被触发。
2. 嵌套路由路径错误：Content组件内的Route使用了/和/about的绝对路径，而当前组件挂载在/content路径下，路径匹配逻辑不符合预期。

修复方案 #

修改App.js #

调整路由顺序，将更具体的路由放在前面，同时给根路由/content添加exact属性确保精准匹配：

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Content from "./Content";

const About = () => {
  return <div>About page without header</div>;
};

const ByHeader = () => {
  return (
    <>
      <div>Header</div>
      <Content />
    </>
  );
};

export default function App() {
  return (
    <Router>
      <Switch>
        {/* 先匹配更具体的/about路由 */}
        <Route path="/content/about" exact>
          <About />
        </Route>
        {/* 精准匹配/content路径 */}
        <Route path="/content" exact>
          <ByHeader />
        </Route>
      </Switch>
    </Router>
  );
}

修改Content.js #

调整内部路由路径，使其对应正确的挂载路径：

import React from "react";
import { Route } from "react-router-dom";

const Home = () => {
  return <div>Home page by header</div>;
};

const Content = () => {
  return (
    <>
      <Route path="/content" exact>
        <Home />
      </Route>
    </>
  );
};

export default Content;

核心要点 #

• Switch组件内路由规则需从具体到通用排列，避免通用规则提前匹配覆盖具体规则
• 精准匹配时务必添加exact属性，防止路径前缀匹配导致的逻辑错误
• 嵌套路由可通过useRouteMatch钩子获取当前路由前缀，避免硬编码路径（如需更灵活的嵌套场景）

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