React-router routes with multiple children

Question

One of my routes needs two children to make what I want to do work.

The main app page where I define all the routes would probably look something like this:

    <Route path="/logs" component={Logs}>
        <Route path="/logs/archive(/**)" component={ArchiveAction}></Route>
        <Route path="/logs/view(/**)" component={LogApp}></Route>
    </Route>

As for the Logs component, if I am at the /logs/view/whatever route, it will render the component called LogApp which will be the whole page.

If it's on /logs/archive/whatever a subcomponent of Logs is what changes. But this part works fine. What I cannot get to work is /logs/view/whatever. Here is my current Logs component:

export class Logs extends Component{

    render(){
        var initialLogsPage =(<Grid>
                <Row>

                    <Col lg={4} md={4} sm={4}>
                        <Directories/>
                    </Col>
                    <Col lg={4} md={4} sm={4}>
                        <Archives children={this.props.children}/>
                    </Col>

                </Row>
            </Grid>);
        return(
            <div>
            {initialLogsPage || this.props.children}
            </div>
        );
    }
}

I understand that my use of this.props.children is probably where the problem lies since I am dealing with two. Is there any way to get around this?

I know. What can I do to make it display the LogApp component? — theJuls, Nov 11 '16 at 20:06
I really don't know enough React to help but could you try swapping these variables? `{this.props.children || initialLogsPage} ` — adam-beck, Nov 11 '16 at 20:11

adam-beck · Answer 1 · 2016-11-11T20:42:28.620

0

Just change your routes:

<Route path="/logs" component={Logs}>
    <Route path="/logs/archive(/**)" component={ArchiveAction}></Route>
</Route>
<Route path="/logs/view(/**)" component={LogApp}></Route>

edited Nov 11 '16 at 20:42

answered Nov 11 '16 at 20:22

adam-beck

5,659
5
20
34

That is how I currently have it. Unfortunately I ideally need the second child route to be within /logs for the sake of consistency on the navigation bar from the main app component – theJuls Nov 11 '16 at 20:35
The only other way I can think of is then checking the route itself. I believe you can access it from `this.state.location.pathname`. Then you can check if the route begins `/logs/view` to render `{this.props.children}` otherwise render the `initialLogsPage` – adam-beck Nov 11 '16 at 20:41

score 0 · Answer 2 · answered Nov 12 '16 at 10:06

You can use Routes without paths:

// Route config
<Route path="/logs" component={Logs}>
  <Route component={Archives}>
    <Route path="/logs/archive(/**)" component={ArchiveAction}></Route>
  </Route>
  <Route path="/logs/view(/**)" component={LogApp}></Route>
</Route>

// components
const Archives = ({ children }) => (
  <Grid>
    <Row>
      <Col lg={4} md={4} sm={4}>
        <Directories/>
      </Col>
      <Col lg={4} md={4} sm={4}>
        <Archives>{children}</Archives>
      </Col>
    </Row>
  </Grid>
);

const Logs = ({ children }) => <div>{children}</div>; // add shared layout here

You should also think about what should be rendered at /logs. Either change Logs to check props.children, e.g., <div>{children || <LogIndexComponent />}</div>, or include a IndexRoute in your route config.

React-router routes with multiple children

2 Answers2