![the the](https://c1.lmlphp.com/image/static/default_avatar.gif)
本文介绍了React路由器在导入后呈现空白页面的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是 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路由器在导入后呈现空白页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!