多个布局在反应路由器4和redux下不起作用

Question

我正在尝试在不同的路线上应用两种布局。 但是，this.props.children不会按预期显示容器。 简而言之，this.props.children在布局中为空。

如何使多个布局有效？

NPM版本

├─┬ @types/react-router@4.0.15
│ ├── @types/history@4.6.0
│ └── @types/react@15.6.4 deduped
├─┬ @types/react-router-redux@5.0.8
│ ├── @types/history@4.6.0 deduped
│ ├── @types/react@15.6.4 deduped
│ └── redux@3.7.2 deduped

路由器

ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <div>
                <Router>
                    <Switch>
                        <MainLayout exact path="/" component={IndexContainer as any}/>
                        <MainLayout path="/index.html" component={IndexContainer as any}/>
                        <CheckoutLayout path="/checkout/:slotDetailId" component={CheckoutContainer as any}/>
                        <Route component={NotFound}/>
                    </Switch>
                </Router>
            </div>
        </ConnectedRouter>
    </Provider>
    ,
    document.getElementById('quickpass')
)

export default class MainLayout extends React.Component<any, {}> {
    render() {
        return (
            <div>
                <Header />
                <Banner />
                    {this.props.children}
                <Footer />
            </div>
        )
    }
}

export class CheckoutLayout extends React.Component<any, {}> {
    render() {
        return (
            <div>
                <Header />
                <Banner />
                {this.props.children}
            </div>
        )
    }
}    

更新

请求http://quickpass.com/checkout/762始终与MainLayout匹配 有什么想法吗？

        <Provider store={store}>
            <ConnectedRouter history={history}>
                <Router>
                    <Switch>
                        <Route path="/" component={MainLayout} />
                        <Route path="/checkout" component={CheckoutLayout} />
                        <Route component={NotFound}/>
                    </Switch>
                </Router>
            </ConnectedRouter>
        </Provider>



        export default class MainLayout extends React.Component<any, {}> {
            render() {
                return (
                    <div>
                        <Header />
                        <Banner />
                        <Switch>
                            <Route exact path='/' component={IndexContainer}/>
                            <Route exact path='/index.html' component={IndexContainer}/>
                        </Switch>
                        <Footer />
                    </div>
                )
            }
        }

        export class CheckoutLayout extends React.Component<any, {}> {
            render() {
                return (
                    <div>
                        <Header />
                        <Banner />
                        <Switch>
                            <Route exact path='/checkout/:slotDetailId' component={CheckoutContainer}/>
                        </Switch>
                    </div>
                )
            }
        }            

Answer 1

您的Switch应该是

<Switch>
    <Route exact path="/" render={(props)=><MainLayout><IndexContainer/> <MainLayout/>}/>
    <Route exact path="/index.html" render={(props)=><MainLayout><IndexContainer/> <MainLayout/>}/>
    <Route path="/checkout/:slotDetailId" render={(props)=><CheckoutLayout><CheckoutContainer/> <CheckoutLayout/>}/>
    <Route component={NotFound}/>
</Switch>

您可以根据需要将props方法中的render传递到您的布局或子项中。

编辑：另一种方式：）

您可以在组件之间对Routes进行分区。您的根组件将为您的布局组件呈现Routes。布局组件将呈现应显示布局的子组件的Routes。

ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
                    <Switch>
                        <Route exact path="/" component={MainLayout}/>
                        <Route path="/checkout" component={CheckoutLayout}/>
                        <Route component={NotFound}/>
                    </Switch>
            </ConnectedRouter>
    </Provider>
    ,
    document.getElementById('quickpass')
)

export default class MainLayout extends React.Component<any, {}> {
    render() {
        return (
            <div>
                <Header />
                <Banner />
                    <Switch> 
                        <Route exact path='/' component={IndexContainer}/>
                        <Route exact path='/index.html' component={IndexContainer}/> 
                       //Any other routes that need to load this layout go after this
                    </Switch>
                <Footer />
            </div>
        )
    }
}

export class CheckoutLayout extends React.Component<any, {}> {
    render() {
        return (
            <div>
                <Header />
                <Banner />
                <Switch> 
                        <Route exact path='/checkout/:slotDetailId' component={CheckoutContainer}/> 
                       //Any other routes that need to load this layout go after this
                    </Switch>
            </div>
        )
    }
}