react-router-dom路由渲染异常：/project页面空白问题求助

我刚解决了一个和你完全一致的React Router路由问题，来分享一下我的排查思路和最终解决方案：

问题场景回顾 #

我的网站路由流程设计为：/ → /home → /about → /project：

• 访问根路径/时显示欢迎页和跳转按钮，点击后进入/home
• /home页面包含导航栏，可切换至/about和/project
• /about页面能正常展示内容，但/project页面完全空白

问题根源定位 #

先看一下Home.js里的原始路由配置：

<Route path="/home" component={About}/>
<Route path="/project" component={Project}/>

这里有两个核心问题：

1. /home的路由没有添加exact属性：React Router默认是部分匹配规则，没有exact的话，容易和其他路由产生匹配冲突
2. App.js缺少/project的路由入口：访问/project时，顶层路由没有匹配项，导致Home组件（包含导航和内容区域）根本不会被渲染

另外，Home.js里重复嵌套了BrowserRouter也是多余的，因为App.js已经有了顶层的路由容器。

最终解决方案 #

我通过两处关键修改解决了问题，其中最核心的就是给/home的路由添加exact属性：

1. 完善App.js的顶层路由配置

添加/project的路由，让这个路径也能渲染Home组件，确保导航栏和内容区域都能正常加载：

import React, { Component } from 'react'; 
import './App.css'; 
import { BrowserRouter as Router, Route } from 'react-router-dom'; 
import Login from './components/Login'; 
import Home from './components/Home'; 

class App extends Component { 
  render() { 
    return ( 
      <Router> 
        <div className="App"> 
          <Route exact path="/" component={Login} /> 
          <Route path="/home" component={Home} /> 
          {/* 新增/project路由，指向Home组件 */}
          <Route path="/project" component={Home} /> 
        </div> 
      </Router> 
    ); 
  } 
} 
export default App;

2. 优化Home.js的嵌套路由逻辑

• 移除多余的BrowserRouter（顶层已有路由容器，无需重复嵌套）
• 用Switch包裹路由，确保同一时间只渲染一个匹配的路由组件
• 给/home的路由添加exact属性，避免部分匹配导致的冲突

import React, { Component } from 'react'; 
import Header from '../Header'; 
import Project from '../Project'; 
import About from '../About'; 
import 'bootstrap/dist/css/bootstrap.min.css'; 
import { Route, Switch } from 'react-router-dom' 
import { Navbar, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap'; 

class index extends Component { 
  render() { 
    return ( 
      <div className="home"> 
        <Header /> 
        {/* 使用Switch确保路由单一匹配 */}
        <Switch>
          {/* 添加exact，只有路径完全等于/home时才渲染About */}
          <Route exact path="/home" component={About}/> 
          <Route path="/project" component={Project}/> 
        </Switch>
      </div> 
    ); 
  } 
} 
export default index;

为什么添加exact能解决问题？ #

React Router的默认匹配规则是部分匹配，如果不给/home添加exact，当路径包含/home的子路径时（比如/home/test），/home的路由也会被触发。在我们的场景中：

• 添加exact后，访问/home时只会匹配/home的路由，渲染About组件
• 访问/project时，顶层路由匹配/project渲染Home组件，嵌套路由再匹配/project渲染Project组件

这样就彻底解决了/project页面空白的问题。

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