React Router v4嵌套路由props.children

236

格雷姆·保罗（Graeme Paul）：

我正在更新通用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>
);

十：

我已经<Provider>淘汰了它，因为它属于react-redux您，并且您不需要它作为进行路由的基础react-router（无论如何，您都可以轻松地添加它并用它封装结构）。

在React Router V4中，Router已将其重命名为BrowserRouterpackage并从package导入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中嵌套路由的实现。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。