React Router修改URL但不渲染组件问题排查求助

我一眼就发现了问题的核心——你在App.js里的路由组件导入犯了一个关键错误，这直接导致路由匹配逻辑完全失效！

错误根源 #

你在App.js的导入语句里，错误地把BrowserRouter重命名成了Switch：

import {BrowserRouter as Switch, Route} from "react-router-dom";

但实际上，Switch是react-router-dom中专门用于匹配第一个符合条件的路由的独立组件，和BrowserRouter是完全不同的两个东西。你现在代码里的<Switch>标签其实是BrowserRouter组件，而真正负责路由匹配的Switch组件根本没被正确引入和使用。这就导致你的路由规则完全没有被执行，所以点击Link后URL虽然变化了，但页面内容不会更新。

修正方案 #

你需要修正App.js的导入语句，正确引入Switch组件，同时注意不要重复引入BrowserRouter（因为你已经在index.js里用它包裹了整个App，这部分是正确的）：

修正后的完整App.js代码：

import React from 'react'
import './App.css';
import InnerPage from './Pages/InnerPage'
import NavMobile from './Components/NavMobile'
import NavDekstop from './Components/NavDesktop'
import Footer from './Components/Footer'
// 修正导入：正确引入Switch和Route
import { Switch, Route} from "react-router-dom";

function App() {
  return (
    <div className="container-fluid main-container">
      <div className="row nav-row-main d-flex d-md-none"><NavMobile/></div>
      <div className="row nav-row-main d-none d-md-flex"><NavDekstop/></div>
      <div className="row inner-row-main flex-grow-1">
        {/* 现在这里的Switch是真正的路由匹配组件 */}
        <Switch>
          <Route exact path="/"><div>home</div></Route>
          <Route path="/recordings"><div>recordings</div></Route>
          <Route path="/charges"><div>Charges</div></Route>
          <Route path="/support"><div>Support</div></Route>
        </Switch>
      </div>
      <div className="row nav-row-main"><Footer/></div>
    </div>
  );
}

export default App;

额外确认项 #

• 你已经做到了整个应用只使用一个BrowserRouter实例，这是正确的做法，不用修改
• NavBar.js里的Link组件导入正确，没有问题
• 路由路径拼写完全匹配，这部分也没问题

修正后重新运行项目，点击导航链接应该就能正常切换页面内容了。

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