将 props 传递给包含多个组件的 React Router

Posted 2023-02-22

【中文标题】将 props 传递给包含多个组件的 React Router

【英文标题】：Passing props to React Router which contains multiple components

【发布时间】：2016-10-28 12:29:04

【问题描述】：

反应路由器 v2.5.1

反应 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;

问题 - 如何将 props 从 React Router 传递给 AuthLayout 组件，其中有多个组件，即依赖于 main 的组件，应该传递不同的 props。

我是一个相当新的反应，所以如果我不正确地处理这个问题，请告知。 我研究过这个主题，但许多解决方案似乎已经过时，并且没有考虑何时可以加载多个组件。

【参考方案1】：

我写了一个JsFiddle that demonstrates passing props to the AuthLayout component。它使用 Navigation router 而不是 React Router，但我希望你对此持开放态度。您可以看到我正在将标题道具传递给 AuthLayout。我根据主要内容将标题设置为“登录”或“注册”。 Navigation 路由器不会为您渲染组件，因此您可以传递任何您想要的道具。

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

【参考方案2】：

嘿@markyph 我更喜欢使用 AuthLayout 看起来像：

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

页脚和身份验证布局本质上是“容器”。您可以在任何地方使用 withRouter(Component) 中的 v3.0.0-alpha.1 从 react-router 访问 props，它为您的组件提供 props.params 和位置。

这比必须在每个级别都传递道具要好得多。

此功能有望很快进入主分支。

如果那不是一个选项，我会有类似的东西：

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

要将路由器道具传递给 props.children，您可以执行此处显示的答案：How to pass props to this.props.children

对于任何一种方法，您的路由器配置中都会包含以下内容。

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

【讨论】：

谢谢 - 我知道你来自哪里 - 我会重新审视这个 - 这是做这个结构的最佳实践吗？在 es6 中为更复杂的场景找到 React 的好例子并不总是那么容易。

是的，对我来说，今年大部分时间我一直在以这种方式处理一个大型项目。它工作得很好。

我倾向于使用 src/components src/containers src/views （组件哑），容器是可重用的状态位正在显示和视图是***组件反应路由器需要，你可以添加一个布局AuthLayout 的文件夹，但我已经将布局放入容器中