我正在更新我的通用 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
是什么?已重命名为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 中嵌套路由的实现。
关于javascript - React Router v4 嵌套路由 props.children,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43180088/