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

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

1 个答案: