使用react-router-dom v5.3.2无法显示/home页面的问题排查

核心错误点 #

• 重复实例化BrowserRouter：React Router仅需在应用根节点（App.js）配置一个BrowserRouter，MainPage中嵌套的BrowserRouter会破坏路由上下文，导致子路由无法正确匹配地址栏路径。
• 嵌套路由路径匹配逻辑错误：v5版本的嵌套路由需要依赖父路由的match对象构建子路径，你在MainPage中直接写path="home"是相对路径，结合父路由/home后，实际匹配的是/home/home，而非地址栏的/home。
• Link使用相对路径：TopNavigationBar中的Link to="home"是相对路径，点击后会在当前路径后拼接，导致地址变为/home/home，不符合预期。
• 路由层级设计冗余：直接将/home指向MainPage，再在MainPage中匹配home路径，形成了不必要的嵌套层级，导致匹配逻辑混乱。

修复后的代码示例 #

1. App.js（根路由调整，用MainPage作为布局组件包裹带导航栏的页面）

import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Login from './Login';
import Registration from './Registration';
import MainPage from './MainPage';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Switch>
          {/* 无需导航栏的独立页面 */}
          <Route path="/login" component={Login} />
          <Route path="/registration" component={Registration} />
          {/* 带导航栏的页面统一嵌套在MainPage下 */}
          <Route path="/" component={MainPage} />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default App;

2. MainPage.js（移除多余BrowserRouter，用match处理嵌套路由）

import { Switch, Route, useRouteMatch } from 'react-router-dom';
import TopNavigationBar from './TopNavigationBar';
import Home from './Home';

export default function MainPage() {
  // 获取父路由的match对象，用于构建子路由路径
  const { path } = useRouteMatch();

  return (
    <div className='container-fluid'>
      <div className='row'>
        <div className='col'>
          <TopNavigationBar />
        </div>
      </div>
      <div className='row'>
        <div className='col'>
          <Switch>
            {/* 访问根路径"/"时默认显示Home */}
            <Route exact path={path}>
              <Home />
            </Route>
            {/* 匹配"/home"路径 */}
            <Route path={`${path}/home`}>
              <Home />
            </Route>
            {/* 匹配"/main"路径 */}
            <Route path={`${path}/main`}>
              {/* 替换为你的Main页面组件 */}
              <Home />
            </Route>
          </Switch>
        </div>
      </div>
    </div>
  );
}

3. TopNavigationBar.js（修改Link为绝对路径）

import { Link } from 'react-router-dom';
import { FaFacebook, FaHome } from 'react-icons/fa';
import { Navbar, Container, Nav } from 'react-bootstrap';
import HorizontalSpace from './HorizontalSpace';
import SearchUserComponent from './SearchUserComponent';

export default function TopNavigationBar() {
  return (
    <div>
      <Navbar bg="light" variant="light">
        <Container>
          <NavbarBrand><h1><FaFacebook /></h1></NavbarBrand>
          <SearchUserComponent />
          <Nav className="me-auto">
            <HorizontalSpace size="50" />
            {/* 使用绝对路径指向/home */}
            <Link to="/home"><h1><FaHome /></h1></Link>
          </Nav>
        </Container>
      </Navbar>  
    </div>
  );
}

额外说明 #

• 访问/时会默认显示Home页面，由MainPage中的exact path={path}实现；
• v5版本嵌套路由必须通过match.path拼接子路径，确保匹配逻辑正确；
• 所有路由相关组件（Link、Route、Switch等）必须处于同一个BrowserRouter上下文下，禁止重复实例化。

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