Whenever we want to deal with nested routes (quite common) there is a bunch of hooks that 

 provides us and a pattern on how to use them that is quite useful to remember:

export default function App() {
  return (
    <Router>
      <div style={{ width: 1000, margin: "0 auto" }}>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/topics">Topics</Link>
          </li>
        </ul>

        <hr />

        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/topics">
          <Topics />
        </Route>
      </div>
    </Router>
  );
}

 for Links since it contains the actual url, whereas it uses 

 for routes since it contains the route path (something like 

function Topics() {
  const { url, path } = useRouteMatch();

  return (
    <div>
      <h1>Topics</h1>
      <ul>
        {topics.map(({ name, id }) => (
          <li key={id}>
            <Link to={`${url}/${id}`}>{name}</Link>
          </li>
        ))}
      </ul>

      <hr />

      <Route path={`${path}/:topicId`}>
        <Topic />
      </Route>
    </div>
  );
}

 to extract URL parameters (in this case the topicId) and 

 to define it’s own subroutes like we did on it’s parent component.

 finally, purely presentational component that doesn’t have any more routes to navigate but just focuses on the content, uses 

 to get whatever different levels of URL params where passed to get to this content, in this case the url to access this content would look something like 

localhots:3000/topics/react/state-management

 which means that the path would look something like 

Nested Routes