Маршрут внутри элемента списка

Question

Я хочу отобразить маршрут внутри элемента списка.Когда я нажму на ссылку, откроется ли и откроется дочерний компонент.Я пробовал это простое решение:

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      {
        topics.map(topic => (
          <li key={topic.id}>
            <Link to={`${match.url}/${link.path}`}>
              {topic.title}
            </Link>
            <Route path={`${match.path}/${topic.path}`} 
              component={Topic} />
          </li>
        ))
      }
    </ul>
  </div>
)

Это работает, но я не уверен, что это правильное кодирование.Другой вариант, который я написал, таков:

class Topics extends Component {
  state = { open: false }

  handleClick = value => {
    this.setState({ open: value })
  }

  render () {
    const { match } = this.props
    const { open } = this.state
    return (
      <div>
        <h1>Topics</h1>
        <ul>
          { topics.map(({ name, id }) => (
            <li key={id}
              className={(open===id) ? 'open' : null}>
              <Link to={`${match.url}/${id}`}
                onClick={() => this.handleClick(id)}>
                {name}
              </Link>
              <div>
                {
                  open===id ?
                    <Route path={`${match.path}/:topicId`}
                      render={({ match }) => (
                        <Topic
                          topic={topics.find(({ id }) =>
                            id === match.params.topicId)}
                          match={match}
                    />)}
                  /> : null
                }
              </div>
            </li>
          ))}
        </ul>
      </div>
    )
  }
}

Является ли кто-нибудь из этих решений хорошим и правильным?Любые другие предложения о том, как решить эту проблему?

Answer 1

Вы имеете в виду что-то подобное?

const ListItemLink = ({ to, ...rest }) => (
  <Route path={to} children={({ match }) => (
    <li className={match ? 'active' : ''}>
      { log(match) }
      <Link to={to} {...rest}>
        { to }
      </Link>
      { match ? 
          <h1>{match.url}</h1> : null }
    </li>
  )} />
)

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      {
        LinksArray.map(link => (
          <ListItemLink key={link.id} 
            to={`${match.url}/${link.path}`} />
        ))
      }
    </ul>
  </div>
)

Answer 2

Я бы порекомендовал вам определить новый компонент для маршрута и использовать свойство children.