显示未找到反应路由器 v4 页面答案

【问题标题】：Show react router v4 not found page显示未找到反应路由器 v4 页面
【发布时间】：2018-08-28 13:26:35
【问题描述】：

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

请查看组件代码。

App.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

【问题讨论】：

有一个父组件declare/instianciate 你的Main。在switch 中使用它，/ 端点采用Main

标签： reactjs react-router react-router-v4 react-router-dom

【解决方案1】：

我已经解决了。

Step1：在Main组件中创建一个函数

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

Step2：修改主组件的渲染方法

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

无论如何。谢谢你的努力:)

【讨论】：