React Router Link 未呈现为可点击按钮

Question

不太确定我在这里做错了。我有一个标题组件，然后我在我的主应用程序组件中使用它，其中我的“页面”组件根据应用程序有条件地呈现。手动转到路由是可行的，但是 React Router 的 Link 组件不会将链接呈现为可点击的按钮，因此我无法点击任何东西......

这是我的标题组件：

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>
    );

}

我确实尝试将to 属性设置为to={link.path} 和to="/about"，但都没有成功。

我只是将这个组件放在我的主应用程序组件中，如下所示：

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

Answer 1

我看到你有标题组件和一些应用程序组件 但是在您的应用程序组件中，您显示 <Gbar /> 而不显示 <Header /> 解决此问题的最佳方法：

在Header

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>

在App:

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