javascript - 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>

这就是我的布局文件的样子

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')
);

布局.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;

考虑一下这仅适用于网络。 native 实现有所不同。
我上传了a small project基于 Create React App，我在其中展示了 V4 中嵌套路由的实现。