«Не удается прочитать свойство 'pathname of undefined" при использовании Bootstrap Nav Active Link

Question

Создание простого сайта для практики, и я пытаюсь пометить активную ссылку Nav.link в меню, чтобы придать ему другой стиль, чтобы пользователь знал, на какой странице он находится, я пытался сделать так: SandBox код

это выдает ошибку «Не удается прочитать свойство 'pathname of undefined" », я искал решения в stackoverflow и больше не смог найти что-то, что сработало для меня.

Это код:

Заголовок:

function Header(props) {
  const { location } = props;

  return (
    <header>
      <div className="container">


        <Navbar bg="none" expand="md">
          <Navbar.Brand href="/">Bloom</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="ml-auto order-0" activeKey={location.pathname}>
              <Nav.Item>
                <Nav.Link href="/contact">Item</Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link href="/about">Item</Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link href="/guide">Item</Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link href="/brands">Item</Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link href="/home" exact>
                  Item
                </Nav.Link>
              </Nav.Item>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      </div>
    </header>
  );
} 

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

    const HeaderWithRouter = withRouter(Header);

const App = () => {
  return (
    <div>
      <HeaderWithRouter />

      <Switch>
        <Route path="/home" exact component={Home} />
        <Route path="/about" exact component={About} />
        <Route path="/brands" exact component={Brands} />
        <Route path="/guide" exact component={Guide} />
        <Route path="/contact" exact component={Contact} />

        <Route
          render={function() {
            return <p>Not found</p>;
          }}
        />
      </Switch>
    </div>
  );
};

И индекс. js:

const history = createBrowserHistory();

ReactDOM.render(
  <div>
    <Router history={history}>
      <App />
    </Router>
  </div>,
  document.getElementById("root")
);

Ошибка:

console.log реквизитов:

Обновление: новейшая ошибка:

Answer 1

Использование @fraction code: codesandbox.io / s / winter-leaf-gc5xk и удаление всех тегов «Header», которые были на каждой странице веб-сайта, решили мою проблему.

Answer 2

Используйте defaultActiveKey вместо activeKey. С помощью activeKey необходимо также указать метод onSelect.