React路由器在导入后呈现空白页面答案

【问题标题】：React router renders blank page after importReact路由器在导入后呈现空白页面
【发布时间】：2020-07-04 10:05:17
【问题描述】：

我是 React 新手，我正在尝试创建一个侧边栏，其中包含指向不同页面或模块的链接。我有一切模块化的意义，侧边栏导航是一个单独的模块，我导入所有链接的类，然后使用 react-router-dom 来重定向路径。但不知何故，在重定向时，响应页面是空白的。

导航模块：

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

import Colors from "../../pages/Colors";
import Typography from "../../pages/Typography";
import Spaces from "../../pages/Spaces";
import Buttons from "../../pages/Buttons";
import Inputs from "../../pages/Inputs";
import Grid from "../../pages/Grid";

import "./style.css";

class Nav extends Component {
  render() {
    return (
      <div className="nav">
        <ul>
          <li>
            <Link to="/colors">Colors</Link>
          </li>
          <li>
            <Link to="/typography">Typography</Link>
          </li>
          <li>
            <Link to="/spaces">Spaces</Link>
          </li>
          <li>
            <Link to="/buttons">Buttons</Link>
          </li>
          <li>
            <Link to="/inputs">Inputs</Link>
          </li>
          <li>
            <Link to="/grid">Grid</Link>
          </li>
        </ul>
        <Switch>
          <Route path="/colors" component={Colors} exact />
          <Route path="/typography" component={Typography} exact />
          <Route path="/spaces" component={Spaces} exact />
          <Route path="/buttons" component={Buttons} exact />
          <Route path="/inputs" component={Inputs} exact />
          <Route path="/grid" component={Grid} exact />
        </Switch>
      </div>
    );
  }
}

export default Nav;

现在我在这里导入的链接类现在只有简单的内容，如下所示。

页面/颜色/index.js：

import React, { Component } from "react";

class Colors extends Component {
  render() {
    return (
      <div>
        <h1>Colors</h1>
      </div>
    );
  }
}

export default Colors;

主 BrowserRouter 位于 App.js 组件中，其中 Sidebar 组件被称为具有 Navigation > 组件。

现在的问题是，如果我从 App.js 中删除 BrowserRouter 并将其放入 Navigation 模块中，路由将起作用。 p>

怎么会这样？

哪种模式是正确的？

【问题讨论】：

标签： javascript reactjs react-router-dom

【解决方案1】：

当您使用React-router 和React-router-dom 时，请确保Router 组件是最顶层的父组件。您可以通过以下方式重试：

将所有Router、Switch 移动到App.js。
在Sidebar 组件内，只渲染链接，既不是Switch 也不是Route 组件。

它会起作用的。

【讨论】：

【解决方案2】：

类似于 Shina 的回答，他很好地涵盖了它，只是多了几个 cmets。保留您的React-Router 并切换到您的App.jsx 文件是相对标准的。由于 App 是父组件，Router 和 Switch 只会被渲染一次，而将路由器保持在 Nav.jsx 将强制 Switch 在每个路由中重新渲染。但是将Switch 包裹在Router 组件中应该可以解决您的问题。

【讨论】：