Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Pass props to <Location /> or <Page /> from parent component #104

Closed
jamwaffles opened this issue Nov 10, 2014 · 7 comments
Closed

Pass props to <Location /> or <Page /> from parent component #104

jamwaffles opened this issue Nov 10, 2014 · 7 comments

Comments

@jamwaffles
Copy link

This is with the React 0.12 branch of RRC. I haven't tried it with the current release of RRC.

I want to pass props down to a page view, but I can't seem to pass them further than the <Pages /> component; if I console.log a handler's props, I just get whatever default props were defined on it, not props passed down. FWIW the route parameters are passed down correctly.

I think I could use a React factory to wrap my handlers and pass props in that way, but I'd very much like to keep the nice clean syntax as seen below. Is this a bug in RRC, or is it simply not supported?

I have a <Router /> with routes in it:

var Router = React.createClass({
    render: function() {
        return (
            <Pages {...this.props}>
                <Page path="/dashboard" handler={Dashboard} />
                <Page path="/auth" handler={Auth} />
                <Page path="/user" handler={User} />

                <NotFound handler={Home} />
            </Pages>
        )
    }
})

And an <App /> which contains my app:

var App = React.createClass({
    render: function() {
        return (
            <html>
                <head>
                    <link rel="stylesheet" href="/public/css/style.css" />
                </head>

                <Router {...this.props} />
            </html>
        )
    }
})

I'm using the React 0.12 spread operator {...this.props} to pass down all the props to the router (using the 0.12 branch of RRC). This by itself works fine.
@STRML
Copy link
Owner

STRML commented Nov 10, 2014

So you want to pass props to the upper-level Router component (Pages or Locations) and have it passed down to each child?

At this time props on the top component are sent to its component (usually React.DOM.div in the case of Locations, or React.DOM.body in the case of Pages).

There is not support for sending props to all child routes, although this could be nice to have.

On Nov 10, 2014, at 7:31 PM, James Waples notifications@github.com wrote:

This is with the React 0.12 branch of RRC. I haven't tried it with the current release of RRC.

I want to pass props down to a page view, but I can't seem to pass them further than the component; if I console.log a handler's props, I just get whatever default props were defined on it, not props passed down. FWIW the route parameters are passed down correctly.

I think I could use a React factory to wrap my handlers and pass props in that way, but I'd very much like to keep the nice clean syntax as seen below. Is this a bug in RRC, or is it simply not supported?

I have a with routes in it:

var Router = React.createClass({
render: function() {
return (
<Pages {...this.props}>


            <NotFound handler={Home} />
        </Pages>
    )
}

})
And an which contains my app:

var App = React.createClass({
render: function() {
return (



            <Router {...this.props} />
        </html>
    )
}

})
I'm using the React 0.12 spread operator {...this.props} to pass down all the props to the router (using the 0.12 branch of RRC). This by itself works fine.

—
Reply to this email directly or view it on GitHub #104.

@jamwaffles
Copy link
Author

That's correct. My app is only using one level of <Page /> inside <Pages /> so it's not crucial that props are passed recursively but I definitely see the point for more complex routers. I tried moving my routes into <App /> and using React 0.12 again to attempt this:

var App = React.createClass({
    getDefaultProps: function() {
        return {
            session: 'test data'
        }
    },

    render: function() {
        return (
            <html>
                <head>
                    <link rel="stylesheet" href="/public/css/style.css" />
                </head>

                <Pages {...this.props}>
                    <Page path="/dashboard/:test" handler={Dashboard} {...this.props} />
                </Pages>
            </html>
        )
    }
})

However props still aren't passed; for the URL /dashboard/foo, doing a console.log in Dashboard#render prints the following:

{
    test: 'foo'
}

So the URL attributes are passed in as props just fine, but actual props aren't. This would be as simple as merging two objects, wouldn't it? I think passing down props through locations should be up to the user to do, especially as {...this.props} syntax makes that easier, unless there's a compelling reason for RRC to do it.

@jamwaffles
Copy link
Author

I've just had a look at some tickets in RRC. It looks like passing props down would make doing stuff like setting <title> on the server in #13 quite a bit easier.

@STRML
Copy link
Owner

STRML commented Dec 27, 2014

Now that this project is stable again and on React 0.12, it would be a great time to give this a shot. I won't have the time in the next few days, but take a look at Router.js - the function renderRouteHandler can now accept a hash of props to pass to the handler, so it should be pretty simple to get this going. If you do, please attach a few tests.

@MPiccinato
Copy link

Any updates or thought on this?

@STRML STRML closed this as completed in a051c64 Dec 30, 2015
@STRML
Copy link
Owner

STRML commented Dec 30, 2015

@MPiccinato This is now in 0.29.0 as childProps. See the test until I write some proper docs.

@MPiccinato
Copy link

Awesome, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@MPiccinato @jamwaffles @STRML