React嵌套路由组件不加载及地址栏刷新失效问题排查

先来说第一个问题：你的简单路由配置不生效，核心原因有这几点：

• 缺少路由上下文容器：React Router的所有路由相关组件（Route、Link）必须包裹在BrowserRouter（或HashRouter）组件内部才能生效。你的代码只导出了Menu组件，但没有在应用入口处用BrowserRouter包裹它，这是最关键的遗漏！比如你需要在App.js或者index.js里这样写：

import { BrowserRouter } from 'react-router-dom';
import Menu from './Menu';

function App() {
  return (
    <BrowserRouter>
      <Menu />
    </BrowserRouter>
  );
}

• Link的路径错误：你在Menu里写的<Link to="menu/account">是相对路径，当当前页面路径是/menu时，点击这个Link会跳转到/menu/menu/account（不是你预期的/menu/account）。解决方法有两种：

  • 改用绝对路径：<Link to="/menu/account">
  • 或者用相对路径（基于当前父路由的路径）：<Link to="./account">

• 嵌套路由的路径可以更简洁：在React Router v5中，嵌套路由可以使用相对路径，不需要写完整的父路径。比如外层Route已经匹配了/menu，内层的子路由可以借助match对象拼接路径，代码更清晰易维护：

const Menu = props => {
  return (
    <div>
      <Route path="/menu" render={({ match }) => {
        return (
          <div> 
            home 
            <br /><Link to={`${match.url}/account`}>account</Link> 
            <br /><Link to={`${match.url}/book`}>book</Link>
            {/* 嵌套子路由，自动拼接父路径 */}
            <Route exact path={`${match.path}/account`} component={Account} />
            <Route exact path={`${match.path}/book`} component={Book} />
          </div> 
        ) 
      }} /> 
    </div> 
  ) 
}

接下来是你大型项目的第二个问题：嵌套路由跳转正常，但刷新/直接访问时失效、CSS混乱。这通常是两个原因导致的：

• 服务器端配置问题：如果你用的是BrowserRouter，它依赖HTML5的History API，当你刷新页面或者直接访问嵌套路径（比如/menu/account）时，浏览器会向服务器发送这个路径的请求，但服务器上并没有对应这个路径的静态文件，所以会返回404或者错误页面。解决方法是配置服务器，让所有路由请求都返回你的index.html文件：

  • 用Create React App的话，可以在package.json里添加"homepage": "."
  • 部署到Nginx时，在配置里添加try_files $uri $uri/ /index.html;
  • 不想改服务器配置的话，可以改用HashRouter，它会在路径前加#（比如/#/menu/account），所有请求都会指向根路径的index.html

• CSS资源路径错误：如果你的CSS是用相对路径引入的（比如<link rel="stylesheet" href="./css/style.css">），当访问嵌套路径/menu/account时，浏览器会尝试从/menu/account/css/style.css加载CSS，而实际上你的CSS文件在根目录的css文件夹里，导致找不到资源、样式混乱。解决方法是把CSS的路径改成绝对路径：<link rel="stylesheet" href="/css/style.css">，或者在Create React App中用%PUBLIC_URL%引入：<link rel="stylesheet" href="%PUBLIC_URL%/css/style.css">

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