React-Router 4默认路由内容在所有其他组件显示的问题咨询

我之前也踩过这个坑！这其实是React Router的路由匹配规则导致的，给你分版本讲讲具体的解决办法：

情况1：你使用的是React Router v5（及更早版本） #

问题根源 #

在v5的路由规则里，路由是前缀匹配的——简单说就是path="/"会匹配所有以/开头的路径（比如/about、/contact都符合这个前缀），所以你跳转其他路由时，默认路由的组件会和目标路由组件一起被渲染出来。

修复方法 #

给默认路由加上exact属性，强制它只在路径完全等于/的时候才匹配，同时别忘了用Switch组件包裹所有路由（它会从上到下找到第一个匹配的路由就停止，避免多个路由同时渲染）：

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

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        {/* 加上exact，只匹配根路径 */}
        <Route exact path="/" component={Home} />
      </Switch>
    </Router>
  );
}

情况2：你使用的是React Router v6（最新版本） #

问题根源 #

v6里移除了exact和Switch，改用Routes组件管理路由匹配。如果你的路由没被Routes包裹，或者把根路由path="/"放在了其他路由前面，就会出现多个路由同时渲染的问题。

修复方法 #

1. 用Routes组件包裹所有路由；
2. 把根路由放在最后，作为兜底匹配项：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        {/* 先定义具体的路由 */}
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        {/* 根路由放在最后，只有前面的路由都不匹配时才会渲染 */}
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  );
}

v6的Routes会按顺序匹配第一个完全匹配的路由，把根路由放在最后就能避免它被提前匹配到。

额外检查点 #

• 确认你没有在Router组件外面直接渲染默认路由的组件（比如在App里直接写<Home />），不然不管跳转到哪个路由，它都会一直显示；
• 如果用了嵌套路由，检查子路由的路径配置有没有和根路由冲突。

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