...
function Topic({match}) {
  const topic = topics.find(({id}) => id === match.params.topicId);
  return (
    <div>
      <h2>{topic.name}</h2>
      <p>{topic.description}</p>
      <ul>
        {
          topic.resources.map((sub) => (
            <li key={sub.id}><Link to={`${match.url}/${sub.id}`}>{sub.name}</Link></li>
          ))
        }
      </ul>
      <hr/>
      <Route path={`${match.path}/:subId`} component={Resources}/>
    </div>
  );
}
function Topics({match}) {
  return (
    <div>
      Topics
      <ul>
        {
          topics.map(({name,id}) => (
            <li key={id}><Link to={`${match.url}/${id}`}>{name}</Link></li>
          ))
        }
      </ul>
      <hr/>
      <Route path={`${match.path}/:topicId`} component={Topic}/>
    </div>
  );
}