React Router v4嵌套路由props.children

Question

我正在更新我的通用react redux应用程序以使用react router v4.我在主布局路线下有嵌套路线.以前我使用{props.children}来显示子路径的内容,但这不再起作用了.这在V4中如何工作？

<Provider store={store} key="provider">
  <div>
    <Route component={Layout} />
    <Switch>
      <Route path="/" component={HomePage} />
      <Route component={Error404} />
    </Switch>
  </div>
</Provider>

要么

<Provider store={store} key="provider">
  <Layout>
    <Route path="/" component={HomePage} />
    <Route component={Error404} />
  </Layout>
</Provider>

这就是我的Layout文件的外观

const Layout = props => (
 <div className="o-container">
   <Header />
     <main>
      {props.children}
     </main>
   <Footer />
 </div>
);

Answer 1

我把它<Provider>拿出来是因为它属于react-redux你并且你不需要它作为路由的基础react-router(无论如何你可以很容易地添加它用它封装结构).

在React Router V4中,Router已经重命名BrowserRouter并从包中导入的内容react-router-dom.因此,对于嵌套路线,您需要将其作为您的孩子插入<Layout>.

index.js

import { Switch, Route } from 'react-router';
import { BrowserRouter } from 'react-router-dom';
import Layout from './Layout';
...
const Root = () => (
  <Layout>
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/other" component={OtherComponent} />
        <Route component={Error404} />
      </Switch>
    </BrowserRouter>
  </Layout>
);

ReactDOM.render(
  <Root/>,
  document.getElementById('root')
);

Layout.js

import React from 'react';
import Header from './Header';
import Footer from './Footer';

const Layout = props => ({
  render() {
    return (
      <div className="o-container">
        <Header />
        <main>{props.children}</main>
        <Footer />
      </div>
    );
  }
});

export default Layout;

记住这只适用于网络.本机实现不同.
我上传了一个基于Create React App 的小项目,我在V4中展示了嵌套路由的实现.

Answer 2

我以为我必须分享这个.如果您在Link组件中使用Header组件.上面的答案是行不通的.你必须BrowserRouter再次作为父母来支持Link.像这样:

<BrowserRouter>
 <Layout>
  <Switch>
    <Route exact path="/" component={HomePage} />
    <Route path="/other" component={OtherComponent} />
    <Route component={Error404} />
  </Switch>
 </Layout>
</BrowserRouter>