react-router-dom Link点击后URL更新但组件不渲染的问题排查与解决

点击导航栏的Link组件后，URL会更新，但对应路由的组件并未在浏览器中渲染。例如点击Profile按钮，URL变为"/profile"，但Profile组件始终不显示，仅在刷新页面后组件才会正常渲染。使用的react-router-dom版本为5.1.2。

相关代码片段 #

NavBar.js #

import React from "react";
import { Link } from "react-router-dom";

const NavBar = () => {
  return (
    <nav>
      <div className="nav-wrapper white">
        <Link to="/" className="brand-logo left">Instagram</Link>
        <ul id="nav-mobile" className="right hide-on-med-and-down">
          <li><Link to="/signin">Signin</Link></li>
          <li><Link to="/signup">Signup</Link></li>
          <li><Link to="/profile">Profile</Link></li>
        </ul>
      </div>
    </nav>
  )
}

export default NavBar;

App.js #

import React from "react";
import { BrowserRouter, Route } from "react-router-dom";
import './App.css';
import NavBar from "./components/Navbar"
import Home from './components/screens/Home';
import Signup from './components/screens/Signup';
import Profile from './components/screens/Profile';
import Login from './components/screens/Login';

function App() {
  return (
    <BrowserRouter>
      <NavBar />
      <Route exact path="/" component={Home} />
      <Route path="/signin" component={Login} />
      <Route path="/signup" component={Signup} />
      <Route path="/profile" component={Profile} />
    </BrowserRouter>
  );
}

export default App;

Home.js #

import React from "react";

const Home = () =>{
    return(
        <h1>home</h1>
    )
}

export default Home

Profile.js #

import React from "react";

const Profile = () =>{
    return(
        <h1>Profile</h1>
    )
}

export default Profile

问题原因及解决方法 #

核心问题 #

1. 组件导入路径大小写错误：App.js中导入NavBar的路径写为./components/Navbar，但实际组件文件名是NavBar.js。在区分文件名大小写的系统（如Linux、macOS）中，这会导致NavBar未被正确挂载，Link组件脱离了BrowserRouter的上下文，仅能触发URL变化但无法触发组件渲染。
2. 缺少Switch组件：React Router v5中，多个Route需要用Switch包裹，它会匹配第一个符合条件的路由并渲染，避免路由匹配逻辑混乱导致的组件不更新问题。

修复步骤 #

步骤1：修正导入路径大小写

修改App.js中的NavBar导入语句：

import NavBar from "./components/NavBar"

步骤2：添加并使用Switch组件

从react-router-dom导入Switch，并将所有Route包裹在其中：

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import './App.css';
import NavBar from "./components/NavBar"
import Home from './components/screens/Home';
import Signup from './components/screens/Signup';
import Profile from './components/screens/Profile';
import Login from './components/screens/Login';

function App() {
  return (
    <BrowserRouter>
      <NavBar />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/signin" component={Login} />
        <Route path="/signup" component={Signup} />
        <Route path="/profile" component={Profile} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

验证效果 #

修改完成后重启项目，点击导航栏的Link按钮，URL更新的同时对应组件会立即渲染，无需刷新页面。

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