Passing props to React Router which contains multiple components

Question

React Router v2.5.1

React v15.1.0

Route config:

<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 Component

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;

Question - how do you pass props to the AuthLayout component from React Router where there are multiple components i.e. dependent on the component for {main} a different props should be passed.

I am fairly new to react so if I am approaching this incorrectly please advise. I have researched this topic but many of the solutions seemed out of date and did not take into account when multiple components can be loaded.

score 0 · Answer 1 · answered Jun 26 '16 at 12:14

I've written a JsFiddle that demonstrates passing props to the AuthLayout component. It uses the Navigation router instead of the React Router but I hope you're open to that. You can see that I'm passing a title prop to the AuthLayout. I set the title to either 'Login' or 'Register' depending on the main content. The Navigation router doesn't render components for you so you can pass whatever props you want.

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

score 0 · Answer 2 · edited May 23 '17 at 12:32

hey @markyph I'd prefer going with AuthLayout to look like:

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

with footer and auth layout being essentially "containers". you can access props from react-router anywhere by using withRouter(Component) in v3.0.0-alpha.1 it provides props.params and location to your component.

this is much nicer than having to pass props at every level.

This feature will make its way into the main branch hopefully very soon.

If thats not an option I'd have something like:

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

to pass router props to props.children you can do something the answer shown here: How to pass props to {this.props.children}

for either method you would have the following in your router config.

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

thanks - I see where you are coming from - I will revisit this - is this best practice for doing this structure? Finding good examples for React in es6 for more complex scenarios is not always that easy. — markyph, Jun 27 '16 at 11:29
Yeah for me I've been working this way on a large project for most of this year. its been working pretty well. — mike james, Jun 27 '16 at 15:36
I tend to have src/components src/containers src/views (components dumb), containers being reusable bits of state being displayed and views being the top level component react router requires, you could add a layout folder for AuthLayout but I've kind of gone with putting layout into containers — mike james, Jun 27 '16 at 15:37

Passing props to React Router which contains multiple components

2 Answers2