显示"找不到反应路由器 v4"页面

Question

我有两个组件，我想显示未找到的页面，但问题是，我不想在<switch>内调用NotFound组件，因为我的开关在我的标题和侧边栏内。

请参阅组件代码。

应用.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;

我的下一个组件主组件.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

Answer 1

我已经解决了。

步骤1：在主组件中创建一个函数

renderWithLayout = (component) => {
return (<div>
<Header/>
<div className="content">
<History/>
<div className="main-content">
{component}
</div>
<Integration/>
</div>
</div>)
};

步骤2：修改了主组件的渲染方法

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>
)
}

无论如何。感谢您的努力:)