將道具傳遞給包含多個組件的React Router

Question

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組件，其中有多個組件，即依賴於{main}的組件，應傳遞不同的道具。

我是相當新的反應所以，如果我接近這個錯誤，請告知。 我已經研究了這個主題，但許多解決方案似乎已經過時，並且在加載多個組件時沒有考慮到。

Answer 1

我寫了一個JsFiddle來演示將道具傳遞給AuthLayout組件 。 它使用導航路由器而不是React路由器，但我希望你對此持開放態度。 您可以看到我將標題道具傳遞給AuthLayout。 我根據主要內容將標題設置為“登錄”或“注冊”。 導航路由器不會為您渲染組件，因此您可以傳遞任何所需的道具。

var {StateNavigator} = Navigation;
var {NavigationLink} = NavigationReact;

var AuthLayout = ({title, stateNavigator}) => (
  <div>
    <h1>{title}</h1>
    <div id="content"></div>
    <div id="footer"></div>
  </div>
)

var Login = ({stateNavigator}) => (
  <NavigationLink
    stateKey="register"
    stateNavigator={stateNavigator}>
    Register
  </NavigationLink>
)

var Register = ({stateNavigator}) => (
  <NavigationLink
    stateKey="login"
    stateNavigator={stateNavigator}>
    Login
  </NavigationLink>
)

var LoginFooter = () => <div>Login Footer</div>
var RegisterFooter = () => <div>Register Footer</div>

var stateNavigator = new StateNavigator([
  {key: 'login', route: ''},
  {key: 'register', route: 'register'}
]);

stateNavigator.states.login.navigated = () => {
  ReactDOM.render(<AuthLayout title="Login" />, 
    document.getElementById('container'));
  ReactDOM.render(<Login stateNavigator={stateNavigator} />, 
    document.getElementById('content'));
  ReactDOM.render(<LoginFooter />, 
    document.getElementById('footer'));
}

stateNavigator.states.register.navigated = () => {
  ReactDOM.render(<AuthLayout title="Register" />, 
    document.getElementById('container'));
  ReactDOM.render(<Register stateNavigator={stateNavigator} />, 
    document.getElementById('content'));
  ReactDOM.render(<RegisterFooter />, 
    document.getElementById('footer'));
}

stateNavigator.start();

Answer 2

嘿@markyph我更喜歡和AuthLayout一起看起來像：

const AuthLayout = props => <div> <div> <div className="content clearfix"> {props.children} </div> </div> <Footer/> </div>

頁腳和身份驗證布局基本上是“容器”。 您可以通過在v3.0.0-alpha.1使用withRouter(Component)從任何地方的react-router訪問props，它為您的組件提供props.params和位置。

這比必須在每個級別傳遞道具要好得多。

這個功能很快就會進入主分支。

如果這不是一個選項，我會有類似的東西：

  const AuthLayout = props =>
        <div>
            <div>
                <div className="content clearfix">
                    {props.children}
                </div>
            </div>
            <Footer {...props}/>
        </div>

將路由器道具傳遞給props.children你可以做一些如下所示的答案： 如何將道具傳遞給{this.props.children}

對於任何一種方法，您將在路由器配置中擁有以下內容。

<Route path={'/auth'} component={AuthLayout}>
   <Route path={'forgot'} component={Forgot}/>
   <Route path={'login'} component={Login}/>
</Route>