React Router使用Switch时路由URL变化但组件不显示问题排查

问题描述 #

我正在使用React开发网站，借助react-router-dom实现路由功能以保证URL显示正确。我开发了导航栏，通过Link组件的to属性跳转至关于页，再使用Switch和Route匹配对应路径渲染对应组件，但功能无法生效，始终无法展示任何组件，不清楚遗漏了哪些配置。

初始代码 #

PageContainer组件代码 #

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

import Alphabet from "./Alphabet";
import About from "./About";


export default class PageContainer extends React.Component {
  render() {
    return (
        <section className="pagecontainer">
          <Switch>

            <Route exact path="/omoss">
              <About />
            </Route>
            <Route exact path="/">
              <Alphabet />
            </Route>
          </Switch>
        </section>
    );
  }
}

Navbar组件代码 #

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

export default class Navbar extends React.Component {
  render() {
    return (
        <section>
          <section className="navbar">
            <Link to="/">Hem</Link>
            <Link to="/omoss">OM OSS</Link>
          </section>
        </section>
    );
  }
}

迭代调整记录 #

更新1 #

• 已将上述两个组件中的BrowserRouter移除
• 修改后的App.js代码如下：

import React from "react";
import "./App.css";

import { BrowserRouter } from "react-router-dom";

import Navbar from "./components/Navbar";
import PageContainer from "./components/PageContainer";

function App() {
  return (
    <BrowserRouter>
      <section className="App">
        <Navbar />
        <PageContainer />
      </section>
    </BrowserRouter>
  );
}

export default App;

调整后问题仍未解决，URL会正常变化，但对应组件不显示。

更新2（问题已解决） #

最终定位到问题根源：本地实际运行的PageContainer代码中，Switch组件内部还放置了两个没有被Route包裹的普通组件，上传代码片段时误删了这部分内容。移除这两个未被Route包裹的组件后，路由功能恢复正常。

问题原理说明 #

你使用的是react-router-dom v5版本，该版本的Switch组件设计规则为：只会渲染第一个与当前访问路径匹配的子Route/Redirect组件。如果Switch内部直接嵌套了未被Route包裹的普通组件，不管路径是否匹配，这些普通组件都会打断后续的路由匹配逻辑，导致所有Route规则失效，自然无法渲染对应的页面组件。
如果确实需要在Switch范围内放置全局通用组件，可以将其移到Switch标签外部，或者用path="*"的Route包裹后放在所有路由规则的最末尾即可。

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