React-Router-Dom v5.2.0路由故障排查：URL变更页面无变化

我此前开发的所有React应用中，该路由配置一直运行正常，但当前路由无法渲染——URL已变更但页面内容保持不变，甚至404页面也无法生效。相关代码如下：

import React from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import LandingPage from './LandingPage';
import AuthFlow from './AuthFlow';
import NotFound from './404';
import Nav from '../components/Navbar/Navbar';
import Login from './AuthFlow/Login/Login';
function RootNavigation() {
  return (
    <Router>
      <Nav></Nav>
      <Switch>
        <Route exact to='/' component={LandingPage}></Route>
        <Route exaect to='/login' component={Login}></Route>
        <Route to='*' component={NotFound}></Route>
      </Switch>
    </Router>
  );
}
export default RootNavigation;

import React from 'react';
import RootNavigation from './layouts/RootNavigation';
function App() {
  return <RootNavigation></RootNavigation>;
}
export default App;

我一眼就看到问题所在了！你的代码里有个低级但致命的拼写错误，这正是路由失效的核心原因：

• 在/login对应的Route组件上，你把路由匹配的关键属性exact写成了exaect（多了一个字母a）。React Router无法识别这个错误的属性，导致这条路由规则完全没有生效，进而打乱了整个Switch组件的匹配逻辑——不仅/login页面无法正确渲染，后续的404兜底路由也没法正常触发。

修正后的完整代码： #

import React from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import LandingPage from './LandingPage';
import AuthFlow from './AuthFlow';
import NotFound from './404';
import Nav from '../components/Navbar/Navbar';
import Login from './AuthFlow/Login/Login';
function RootNavigation() {
  return (
    <Router>
      <Nav></Nav>
      <Switch>
        <Route exact to='/' component={LandingPage}></Route>
        {/* 这里把错误的exaect修正为exact */}
        <Route exact to='/login' component={Login}></Route>
        <Route to='*' component={NotFound}></Route>
      </Switch>
    </Router>
  );
}
export default RootNavigation;

额外排查建议（如果修正后仍有问题）： #

• 检查你的Nav组件：确保跳转路由用的是react-router-dom提供的Link组件，而不是原生<a>标签——原生a标签会刷新整个页面，直接破坏单页应用的路由机制。
• 确认react-router-dom版本：如果是v6及以上版本，Switch已经被移除，需要改用Routes组件，同时Route的属性也有变化（比如component改成element），不过从你的代码结构来看应该是v5版本，这条可以暂时忽略。

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