React Router v2.5.1
React v15.1.0
路线配置:
<Router history={hashHistory}>
<Route path="auth" component={AuthLayout}>
<Route path="login" components={{main:LoginForm, footer: LoginFooter}} />
<Route path="register" components={{main:RegisterForm, footer: RegisterFooter}} />
</Route>
</Router>
AuthLayout组件
class AuthLayout extends React.Component {
render() {
const { main, footer} = this.props;
return (
<div>
<div>
<div className="content clearfix">
{main}
</div>
</div>
{footer}
</div>
);
}
}
export default AuthLayout;
问题 - 如何将来自React Router的道具传递给AuthLayout组件,其中有多个组件,即依赖于的组件,应该传递不同的道具 .
我是相当新的反应所以,如果我接近这个错误,请告知 . 我已经研究了这个主题,但许多解决方案似乎已经过时,并且在加载多个组件时没有考虑到 .
2 回答
我写了一个JsFiddle that demonstrates passing props to the AuthLayout component . 它使用Navigation router而不是React路由器,但我希望你_1187012_ m将 Headers 道具传递给AuthLayout . 我根据主要内容将 Headers 设置为'Login'或'Register' . 导航路由器不会为您渲染组件,因此您可以传递任何所需的道具 .
嘿@markyph我更喜欢和AuthLayout一起看起来像:
const AuthLayout = props => <div> <div> <div className="content clearfix"> {props.children} </div> </div> <Footer/> </div>
页脚和身份验证布局基本上是"containers" . 你可以在
v3.0.0-alpha.1
中使用withRouter(Component)
从任何地方的react-router访问道具,它为你的组件提供props.params和位置 .这比必须在每个级别传递道具要好得多 .
这个功能很快就会进入主分支 .
如果这不是一个选项,我会有类似的东西:
将路由器道具传递给props.children你可以做一些这里显示的答案:How to pass props to
对于任何一种方法,您将在路由器配置中拥有以下内容 .