Render Component Through Sub Route

Question

I have a component that has some navigation buttons on it, with the routes setup something like this:

<Route path="/" component={App}>
  <IndexRoute component={HomePage} />
  <Route path="/id/person" component={Person} >
    <IndexRedirect to="summary" />
    <Route path="/id/person/summary" component={Summary} />
    <Route path="/id/person/history" component={History} />
  </Route>
</Route>

This all runs in a React/Redux setup and works fine up to the HomePage. I have no idea how to render the sub-routes and the examples on line are a bit scarce.

In the Person component, should I do:

<div>
   {props.children}
</div>

But then how do I pass the Redux state down to that? Someting doesn't make sense to me, although it feels like it should be something really simple.

jacoballenwood · Answer 1 · 2016-11-25T18:20:56.143

0

setup an index route for your sub route root, and then render other components if a sub route is matched. otherwise, the root component is rendered. something like this:

<Route path=":id/person" >
    <IndexRoute component={Person} />
    <Route path="summary" component={Summary} />
    <Route path="history" component={History} />
</Route>

if :id/person is matched, then it will render the Person component. if :id/person/summary is matched, then it will render the Summary component, etc.

Edit:

say your route renders the Person component, and your Summary and History component needs state.App.Items.List as a prop.

import React, {
    Component,
} from 'react';

class Person extends Component {

    render() {
        const { items } = this.props
        return (
            <div className='person-container'>
                <Summary items={items} />
                <History items={items} />
            </div>
        );
    }
}


function mapStateToProps(state) {
    return {
        items: state.App.Items.List,
    }
}
export default connect(mapStateToProps, null)(Person)

Is this what you're trying to do?

edited Nov 25 '16 at 18:20

answered Nov 24 '16 at 16:25

jacoballenwood

2,787
2
24
39

How do I pass props to it? – Jan Swart Nov 24 '16 at 16:26
are you talking about your components using `state`? you can connect the state you need to your components inside the component with `connect`. check this QA here http://stackoverflow.com/questions/38202572/understanding-react-redux-and-mapstatetoprops. so in your Summary component, you can map state.Summary and pass it down to children components and such. if you are talking about something else, let me know and I'll try to answer – jacoballenwood Nov 24 '16 at 16:32
The main route for the sub-route should be summary and not person. Person cannot exist without defaulting to summary. So person is an abstract route. Apart from this I'm not too sure how the Summary and History and sub-route can be rendered within the Person route. – Jan Swart Nov 24 '16 at 17:21
so `/person` will never be a route? or you want that to default to summary? – jacoballenwood Nov 24 '16 at 21:12
It will never be a route. That's why it reroutes to summary. The routing works. It's more a problem of how to render the components within a component and passing props down to them. – Jan Swart Nov 25 '16 at 05:15
i think that goes back to my comment up above about connecting your parent component to state and passing down certain state variables as props to your children. forgive me if I'm not understanding you. I'll edit and try to show you an example – jacoballenwood Nov 25 '16 at 18:11

Render Component Through Sub Route

1 Answers1