React路由器在导入后呈现空白页面 [英] React router renders blank page after import

问题描述

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

导航模块:

import React, { Component } from "react";从react-router-dom"导入 { Route, Switch, Link };从../../pages/Colors"导入颜色；从../../pages/Typography"导入排版；从../../pages/Spaces"导入空间；从../../pages/Buttons"导入按钮；从../../pages/Inputs"导入输入；从../../pages/Grid"导入网格；导入./style.css"；类导航扩展组件{使成为() {返回 (<div className="nav"><ul><li><Link to="/colors">Colors</Link><li><Link to="/typography">Typography</Link><li><Link to="/spaces">Spaces</Link><li><Link to="/buttons">Buttons</Link><li><Link to="/inputs">Inputs</Link><li><链接到=/grid">网格</Link><开关><路线路径="/colors";组件={颜色} 精确/><Route path="/typography";组件={Typography} 精确/><路由路径="/spaces";component={Spaces} 精确/><路线路径="/buttons";组件={Buttons} 精确/><路由路径="/inputs";组件={输入}精确/><路线路径="/grid";组件={Grid} 精确/></开关>

);}}导出默认导航；

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

页面/颜色/index.js:

import React, { Component } from "react";类颜色扩展组件{使成为() {返回 (<div><h1>颜色</h1>

);}}导出默认颜色；

主要的 BrowserRouter 位于 App.js 组件中，Sidebar 组件从这里被调用，具有导航 组件.

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

怎么会这样?

哪种模式是正确的?

解决方案

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

• 将所有Router、Switch移动到App.js中.
• 在Sidebar组件中，只渲染链接，没有Switch和Route组件.

它会起作用.

I am new to React and I am trying to create a sidebar having links to different pages or modules. I have everything modularized meaning, the sidebar Navigation is a separate module where I import all the linked classes and then use react-router-dom to redirect the paths. But somehow when redirecting, The response page is blank.

Navigation Module:

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;

Now the link classes that I import here have just simple content right now like the following.

pages/Colors/index.js:

import React, { Component } from "react";

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

export default Colors;

The main BrowserRouter is located in the App.js component from where the Sidebar component is called having Navigation component.

Now the thing is if I remove the BrowserRouter from App.js and put it in the Navigation module the routing works.

How come so?

Which pattern is the correct one?

解决方案

When you work with React-router and React-router-dom, make sure the Router component is the top most parent. You can try again by:

• Move all Router, Switch into App.js.
• Inside Sidebar component, just render links, neither Switch nor Route component.

It will work.

这篇关于React路由器在导入后呈现空白页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！