активная ссылка на реакционный маршрутизатор не работает, когда компоненты Link находятся в другом файле

Question

Навигационные ссылки не активны, если я получаю доступ к URL-адресу непосредственно из URL-адреса браузера или перенаправляется из любого другого элемента

Приложение. js

<Router>
  <Container fluid>
    <Switch>
      <PrivateRoute path="/" exact>
        <IncludeHeaderSidebar>
          <Home />
        </IncludeHeaderSidebar>
      </PrivateRoute>
      <PrivateRoute path="/about" exact>
        <IncludeHeaderSidebar>
          <Home />
          About
        </IncludeHeaderSidebar>
      </PrivateRoute>
      <PrivateRoute path="/users" exact>
        <IncludeHeaderSidebar>
          <Home />
          Users
        </IncludeHeaderSidebar>
      </PrivateRoute>
      <PrivateRoute path="/logout" exact>
        <Logout logoutFunction={this.props.doLogout}></Logout>
      </PrivateRoute>
      <Route path="/login" exact>
        {this.props.currentUserId ? <Redirect to="/"></Redirect> : <Login />}
      </Route>
    </Switch>
  </Container>
</Router>

PrivateRoute - это пользовательский компонент, который просто проверяет, прошел ли пользователь аутентификацию.

IncludeHeaderSidebar - компонент, отвечающий за перенос дочерних элементов в заголовок и боковую панель

боковая панель . js

<React.Fragment>
  <Link className={styles.AddNewButton} to="/new">
    <img src={PlusIcon} width="25" className="mr-2" />
    <span>New</span>
  </Link>
  <Nav variant="pills" defaultActiveKey="/" className="flex-column">
    <Nav.Item className={styles.SidebarItem}>
      <Nav.Link as={Link} to="/" className={styles.SidebarLink} eventKey="/">
        Home
      </Nav.Link>
    </Nav.Item>
    <Nav.Item className={styles.SidebarItem}>
      <Nav.Link
        as={Link}
        to="/about"
        className={styles.SidebarLink}
        eventKey="/about"
      >
        About
      </Nav.Link>
    </Nav.Item>
    <Nav.Item className={styles.SidebarItem}>
      <Nav.Link
        as={Link}
        to="/users"
        className={styles.SidebarLink}
        eventKey="/users"
      >
        Users
      </Nav.Link>
    </Nav.Item>
  </Nav>
</React.Fragment>

Заголовок. js

<React.Fragment>
  <Row className={styles.HeaderRow}>
    <Col xs={2}>
      <Link to="/">
        <Image src={Logo} className={styles.Logo} fluid></Image>
      </Link>
    </Col>
    <Col xs={7}>
      <SearchBar></SearchBar>
    </Col>
    <Col xs={3}>
      <div className="d-flex justify-content-end">
        <Dropdown alignRight>
          <Dropdown.Toggle
            as={"a"}
            id="dropdown-basic"
            // href="#"
            className={styles.HeaderDropdown}
          >
            {this.props.currentUserFullName}
          </Dropdown.Toggle>
          <Dropdown.Menu>
            <Dropdown.Item as={Link} to="/logout">
              Logout
            </Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown>
      </div>
    </Col>
  </Row>
</React.Fragment>

Теперь, когда я нажимаю на lo go (в Заголовке. js), файл перенаправляет меня на home / baseURL ("/"), но Nav.Link не активируется при изменении маршрута.

Я использовал реагировать * bootstrap и реагировать на маршрутизатор-dom