我正在尝试为我的应用程序设置路由

Question

我正在尝试为我的React应用设置路由系统，以允许该应用导航。我不确定我的路由系统出了什么问题。

我尝试导入路由器，交换机，链接，useRouteMatch和useParams，但不确定它们的含义或作用。

我希望应用顶部的链接可以链接到其他页面，但也要包含相同的导航。

    import React from "react";
    import Nav from "react-bootstrap/Nav";
    import {
     BrowserRouter as Router,
     Switch,
     Route,
      Link,
      useRouteMatch,
      useParams
    } 
    from "react-router-dom";

    export default class HeaderNavigation extends React.Component {
      render() {
        return (
          <Router>
            <Nav
              activeKey="/home"
              onSelect={selectedKey => alert(`selected ${selectedKey}`)}>
              <div>
              <Nav.Item>
                <Nav.Link to="/home">Active</Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link to="/users">users</Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link to="/about">Link</Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link to="topics">topics</Nav.Link>
                </Nav.Item>
              </div>
            </Nav>

            <Switch>
            <div>
              <Route path="/about">
                <About />
              </Route>
              <Route path="/users">
                <Users />
              </Route>
              <Route path="/topics">
                <Home />
              </Route>
              </div>
            </Switch>

          </Router>
        );
      }

    }
    function Home() {
      return <h2>Home</h2>;
    }

    function About() {
      return <h2>About</h2>;
    }

    function Users() {
      return (
        <div>
          <h2>Users</h2>

          <ul>
            <li>
              <Link to={`${match.url}/components`}>Components</Link>
            </li>
            <li>
              <Link to={`${match.url}/props-v-state`}>
                Props v. State
              </Link>
            </li>
          </ul>

          {/* The Topics page has its own <Switch> with more routes
              that build on the /topics URL path. You can think of the
              2nd <Route> here as an "index" page for all topics, or
              the page that is shown when no topic is selected */}
          <Switch>
            <Route path={`${match.path}/:usersid`}>
              <Topic />
            </Route>
            <Route path={match.path}>
              <h3>Please select a topic.</h3>
            </Route>
          </Switch>
        </div>
      );
      }

      function users() {
      let { users } = useParams();
      return <h3>Requested topic ID: {topicId}</h3>;
      }
    }