With reactjs and react-router, could I display either a component or {this.props.children}?

Question

Here is the scenario: I have a bunch of components that I allow certain words to be clicked, which will link to a reference page/component.

If the highlighted words are not clicked, I simply display the component (which mind you, there are many of them that allow this mechanism and a whole menu of them on the side).

Here is the current code:

//app.js
ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={App} handler={App}>
        <IndexRoute component={Index}/>
         <Route path="help" component={HelpPage}>
            <Route path="/help/reference" component={ReferenceComponent}></Route>
        </Route>

    </Route>
  </Router>,
  destination
);

//help.js:
export default class HelpPage extends Component {
    render() {
        return (
            <Grid>
                <Title/>
               <Row className="show-grid">
                   <Col lg={2} md={4} sm={4}>
                        <HelpMenu
                            getBtnId={this.getBtnId}
                        />
                   </Col>
                   <Col lg={10} md={8} sm={8}>
//part that most matters (currently doesnt work)
                       {<HelpPanels panelIndex={this.state.panelIndex}/> ||
                       this.props.children}
                   </Col>

               </Row>
           </Grid>

        )
    }
}

I commented right above the part that most matters when rendering my HelpPage component.

I understand that what I am trying to do currently doesn't work. What I want is basically either you post one of the page's components, or if you are in the .../help/reference route you post that Reference component. Is there any way I can do this? I've messed around with it a bit, but so far, nothing.

Answer 1

Just change your route config so that according to the selected index you can show HelpPanels as child route under HelpPage and for reference route you show ReferenceComponent . Since reference route is a child route of help route you don't need to explicitly write full path as /help/reference in the config object.

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={App} handler={App}>
        <IndexRoute component={Index}/>
         <Route path="help" component={HelpPage}>
            <Route path="details/:helpId" component={HelpPanels}/>
            <Route path="reference" component={ReferenceComponent}></Route>
        </Route>

    </Route>
  </Router>,
  destination
);

Then just display {this.props.children} under HelpPage Component.

export default class HelpPage extends Component {
    render() {
        return (
            <Grid>
                <Title/>
               <Row className="show-grid">
                   <Col lg={2} md={4} sm={4}>
                        <HelpMenu
                            getBtnId={this.getBtnId}
                        />
                   </Col>
                   <Col lg={10} md={8} sm={8}>
//if the route is /help/reference the children will be `ReferenceComponent` component or if it is something in the format /help/details/3 it will show `HelpPanels` component and this.props.params.helpId will be 3.
                       {this.props.children}
                   </Col>

               </Row>
           </Grid>

        )
    }
}