为什么修改React路由URL后不生效，新路径无法渲染对应组件？

问题修复方案 #

1. 优先检查react-router-dom版本匹配问题 #

你当前的写法是react-router-dom v5的语法，如果项目已经升级到v6版本，会直接导致路由匹配失效，需要做如下修改：

• 替换Switch组件为Routes组件
• Route的component属性改为element，值为组件实例
  修改后的App.js路由部分代码如下：

import { BrowserRouter, Route, Routes } from "react-router-dom";
// ...其他导入保持不变

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <CustomLayout {...this.props}>
          <Routes>
            <Route exact path="/" element={<MainPage />} />
            <Route exact path="/signup" element={<SignUp />} />
            <Route exact path="/Add-Item" element={<AddItem />} />
            <Route exact path="/admin" element={<Admin />} />
            <Route exact path="/post/:id" element={<Details />} />
          </Routes>
        </CustomLayout>
      </BrowserRouter>
    );
  }
}

2. 新URL访问404问题修复 #

单页应用前端路由需要服务器配置兜底重定向：

• 本地开发时如果用create-react-app启动的服务，检查package.json里的homepage字段是否配置正确，不要设置额外的二级路径
• 生产部署时要配置Nginx/Apache等服务，将所有请求重定向到index.html，示例Nginx配置：

location / {
  try_files $uri $uri/ /index.html;
}

3. 旧URL仅加载导航栏不加载子组件问题排查 #

• 检查CustomLayout组件内部是否正确渲染了children属性，路由匹配到的组件会作为children传入CustomLayout，必须在Layout的JSX中预留{this.props.children}或者{props.children}的渲染点位
• 检查导航链接是否使用react-router-dom提供的Link组件，不要用原生a标签跳转，原生跳转会触发页面刷新导致路由状态异常
• 检查路由path的大小写是否和导航链接里的路径完全一致，默认react-router的路由是大小写敏感的，比如你配置的/Add-Item如果导航里写的/add-item就会匹配失败

4. 其他常见排查点 #

• 检查是否有路由规则顺序错误，你当前用的v5版本Switch是从上到下匹配，没有问题，但如果有通配符路由要放在最后
• 检查redux相关配置是否正确，你当前的index.js配置没有问题，确保reducer注册没有异常

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