reactjs - 显示未找到反应路由器 v4 页面
问题描述
我有两个组件,我想显示未找到的页面,但问题是,我不想在NotFound
里面调用组件,<switch>
因为我的开关在我的标题和侧边栏内。
请查看组件代码。
应用程序.js
import React, {Component} from 'react';
import Header from './Header.js';
import Main from './Main.js';
import { Switch, Route, Redirect } from 'react-router-dom';
class App extends Component
{
constructor(){
super();
}
render(){
return (
<Switch>
<Route path="/" component={Main} />
</Switch>
)
}
}
export default App;
我的下一个组件 Main.js
import React, {Component} from 'react';
import Header from '../app/Header.js'
import Integration from '../app/Integration.js';
import History from '../app/History';
import { Switch, Route } from 'react-router-dom'
import Dashboard from './Dashboard';
import List from '../config/List'
import NotFound from './NotFound';
class Main extends Component
{
constructor(){
super();
}
render(){
return (
<div>
<Header/>
<div className="content">
<History/>
<div className="main-content">
<Switch>
<Route exact path="/configuration" component={List} />
<Route exact path="/configuration/show" component={Dashboard} />
// I don't want to put my NotFound Route Tag here, because it includes header and sidebar */
</Switch>
</div>
<Integration/>
</div>
</div>
)
}
}
export default Main
解决方案
我已经解决了。
Step1 : 在 Main 组件中创建一个函数
renderWithLayout = (component) => {
return (<div>
<Header/>
<div className="content">
<History/>
<div className="main-content">
{component}
</div>
<Integration/>
</div>
</div>)
};
Step2 : 修改 Main 组件的 render 方法
render(){
return (
<Switch>
<Route exact path="/configuration" render={(props) => {
return this.renderWithLayout(<List {...props}/>) ;
}} />
<Route exact path="/configuration/show" render={(props)=>{
return this.renderWithLayout(<Dashboard {...props}/>);
}} />
<Route path="*" component={NotFound}/>
</Switch>
)
}
无论如何。感谢你的付出 :)
推荐阅读
- c# - 急切地加载多个级别
- memory - 并行性:内存系统给人一种大、便宜和快速的错觉
- oauth-2.0 - 授权标头中是否支持多个不记名令牌
- java - 如何从平面 sql 选择结果集中创建嵌套映射
- database - 仅在 dynamodb 中为具有两种类型值的列创建索引的效果如何
- angular - 为 prod 构建时出现错误 Uncaught NullInjectorError: StaticInjectorError(a)[D -> v]
- java - Java延迟函数
- pandas - 从系列中找到重要的值
- go - 根据 API 测试查找 gRPC API 的代码覆盖率
- c - _Bool 是如何实现的?