Reactjs &引用；无法读取属性'；路径名'；“未定义”的定义；使用引导导航活动链接时

建立简单的网站进行练习，我试图在菜单中标记活动的Nav.link，给它不同的风格，这样用户就可以知道他在哪一页了， 我试过这样做：

它给了我一个“无法读取未定义的属性'pathname'的错误”，我在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>
  );
} 

功能标题（道具）{
const{location}=props；
返回(
开花
项目
项目
项目
项目
项目
);
} 

app.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>
  );
};

const headerwhithrouter=whithrouter（Header）；
常量应用=（）=>{
返回(
);
};

以及index.js：

const history = createBrowserHistory();

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

const history=createBrowserHistory（）；
ReactDOM.render(

道具的console.log：


更新：最新错误：
使用defaultActiveKey而不是activeKey。使用activeKey，您还需要指定onSelect方法。
使用@fraction code:并删除网站每页中的所有“Header”标记，解决了我的问题。
是否在Header组件中使用了props上的console.log？在
activeKey={location.pathname}
您的位置是undefined@AlexanderElert在PROPSCOUNLE.log的屏幕截图上方添加了您是否可以创建一个沙盒来产生错误？@Fraction它正在工作！我只需要删除每个页面中的标题。非常感谢！