React Router 4 - Проблемы с отображением вложенной ссылки

Я новичок в React-сцене и примерно через неделю поисков решений и руководств не смог решить эту проблему.

У меня следующая структура с Ожидаемые результаты:

• «Главный» компонент (в настоящее время index.js) имеет навигационную ссылку.
• Указанная ссылка указывает на компонент под названием «Пользователи», который отображает список пользователей.
• Щелчок по ссылке пользователя должен заменить список пользователей «подробным представлением» этого пользователя (в настоящее время указано «Проверка маршрута»), аналогично тому, как если бы вы были на Facebook и выбрали «профиль», вы перейдете на другую страницу.

Я следил за этим руководством: https://reacttraining.com/react-router/web/example/basic, за исключением использования параметров "match" на данный момент b / c, кажется, я неправильно использую их в codeandbox, в котором я тоже новичок.

Фактические результаты

При нажатии на первую ссылку «Список пользователей» отображается точный список, но также отображается компонент «UserDashboard» под списком.

При нажатии на одну из пользовательских ссылок URL-адрес обновляется, но вы попадаете на пустую страницу.

Код как для index.js:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router- 
dom";
import Users from "./Users";
import UserDashboard from "./UserDashboard";

import "./styles.css";

function App() {
  return (
    <Router>
      <div className = "App">
        <ul>
          <li>
            <Link to = "/users/">Users List</Link>
          </li>
        </ul>

        <Switch>
          <Route exact path = "/users/" component = {Users} />          
        </Switch>
      </div>
    </Router>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Users.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router- 
dom";
import UserDashboard from "./UserDashboard";

function Users({ match }) {
  return (
    <div>
      <ul>
        <li>
          <Link to = "/1">John Smith</Link>   
        </li>
        <li>
          <Link to = "/2">Alex Rogers</Link>
        </li>
        <li>
          <Link to = "/3">Ignacio Don</Link>
        </li>
      </ul>
      <Route path = "/:id" component = {UserDashboard} />
    </div>
  );
}

export default Users;

UserDashboard.js

import React from "react";
import ReactDOM from "react-dom";

function UserDashboard({ match }) {
  return (
    <div>
      <h3>Route Test</h3>
      <h3>{match.params.topicId}</h3>
    </div>
  );
}

export default UserDashboard;

Идея, конечно же, состоит в том, чтобы производить все это с реальными данными с использованием graphQL, но пока я не исправлю эту (вероятно, очевидную) проблему, я не могу продолжить.

Ссылка на демонстрационную версию кода выше:

https://codesandbox.io/embed/oxx1v2ylyq