Javascript React路由器链接未呈现为可单击按钮

我不确定我做错了什么。我有一个标题组件，然后在我的主应用程序组件中使用它，其中我的“页面”组件根据应用程序有条件地呈现。手动转到路由工作，但React路由器的链接组件没有将链接呈现为可单击按钮，因此我无法单击任何内容

以下是我的标题组件：

function Header(props) {

    const links = props.links.map(link => {
        return (

            <Link to={{pathname: link.path}} key={link.title}>{link.title}</Link>

        );
    });

    return(
        <Navbar className="border-bottom" bg="transparent" expand="lg">
            <Navbar.Brand href="#home">Garrett Love</Navbar.Brand>
            <Navbar.Toggle className="border-0" aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="ml-auto">
                    {links}
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    );

}

---

我看到你有标题组件和一些应用程序组件 但在应用程序组件中，您显示

，而不显示

解决此问题的最佳方法：

在

标题中

const Header = props => 
    <Navbar className="border-bottom" bg="transparent" expand="lg">
        <Navbar.Brand href="#home">Garrett Love</Navbar.Brand>
        <Navbar.Toggle className="border-0" aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="ml-auto">
              {props.links.map(link => <Link to={link.path} key={link.title}>{link.title}</Link>)}
            </Nav>
        </Navbar.Collapse>
    </Navbar>

---

我看到你有标题组件和一些应用程序组件 但在应用程序组件中，您显示

，而不显示

解决此问题的最佳方法：

在

标题中

const Header = props => 
    <Navbar className="border-bottom" bg="transparent" expand="lg">
        <Navbar.Brand href="#home">Garrett Love</Navbar.Brand>
        <Navbar.Toggle className="border-0" aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="ml-auto">
              {props.links.map(link => <Link to={link.path} key={link.title}>{link.title}</Link>)}
            </Nav>
        </Navbar.Collapse>
    </Navbar>

---

哦，对不起，我一定是忽略了这一点。它叫Gbar，为了这个问题，我想把它改为Header，但它们在我的项目中被正确命名了。哦，对不起，我一定忽略了这一点。它叫Gbar，为了回答这个问题，我想把它改为Header，但是它们在我的projectLink组件中被正确命名。链接组件没有将链接呈现为可点击的按钮。。。可能

此.state.headerLinks

为空？链接组件未将链接呈现为可单击按钮。。。可能

此.state.headerLinks

为空？

render() {
  return(
      <Router>
          <Container className="p-0" fluid={true}>
              <Header links={this.state.headerLinks} />
              <Route path="/" exact render={() => <Home title={this.state.home.title} subTitle={this.state.home.subTitle} />} />
              <Route path="/about" render={() => <About title={this.state.about.title} />} />
              <Footer />
          </Container>
      </Router>
  );
}