title: Route within list-item
body: <p>I want to render a Route inside a list item. When I click on the Link the li shall open and reveal the child component. I have tried this simple solution:</p>
  
  <pre><code>const Topics = ({ match }) =&gt; (
    &lt;div&gt;
      &lt;h2&gt;Topics&lt;/h2&gt;
      &lt;ul&gt;
        {
          topics.map(topic =&gt; (
            &lt;li key={topic.id}&gt;
              &lt;Link to={`${match.url}/${link.path}`}&gt;
                {topic.title}
              &lt;/Link&gt;
              &lt;Route path={`${match.path}/${topic.path}`} 
                component={Topic} /&gt;
            &lt;/li&gt;
          ))
        }
      &lt;/ul&gt;
    &lt;/div&gt;
  )
  </code></pre>
  
  <p>It works, but I'm not sure this is proper coding. Another variant I wrote is this:</p>
  
  <pre><code>class Topics extends Component {
    state = { open: false }
  
    handleClick = value =&gt; {
      this.setState({ open: value })
    }
  
    render () {
      const { match } = this.props
      const { open } = this.state
      return (
        &lt;div&gt;
          &lt;h1&gt;Topics&lt;/h1&gt;
          &lt;ul&gt;
            { topics.map(({ name, id }) =&gt; (
              &lt;li key={id}
                className={(open===id) ? 'open' : null}&gt;
                &lt;Link to={`${match.url}/${id}`}
                  onClick={() =&gt; this.handleClick(id)}&gt;
                  {name}
                &lt;/Link&gt;
                &lt;div&gt;
                  {
                    open===id ?
                      &lt;Route path={`${match.path}/:topicId`}
                        render={({ match }) =&gt; (
                          &lt;Topic
                            topic={topics.find(({ id }) =&gt;
                              id === match.params.topicId)}
                            match={match}
                      /&gt;)}
                    /&gt; : null
                  }
                &lt;/div&gt;
              &lt;/li&gt;
            ))}
          &lt;/ul&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>Is anyone of these solutions good and proper? Any other suggestions on how to solve this?</p>