链接未使用 Bootstrap React NavBar 组件路由

Question

App.JS

export default class App extends React.Component {
  render() {    
    return (
      <div className="App">
        <Router>
          <div>
            <HeaderComponent />
            <Switch>
              <Route exactly component={HomePage} pattern="/" />
              <Route exactly component={ContactUs} pattern="/contact"/>
              
            </Switch>
          </div>
        </Router>
      </div>
    );
  }
}

我的导航栏是根据 https://react-bootstrap.github.io/components/navbar/

构建的

  return (

                        <Navbar className="textCenter" style={NavBarStyles} bg="white" variant="light" margin="auto">
                            <Nav className="ml-auto">
                                <Nav.Link href="/">Home</Nav.Link>
                                <Nav.Link href="/contact">Contact Us</Nav.Link>
                            </Nav>
                            
                            
                        </Navbar>
   
            
        );

当我放弃 Bootstrap 导航栏并简单地使用带有“Link 到...”语法的 ul 时，我能够获得我想要的功能。

但我非常喜欢我的导航栏，但我似乎无法找到如何将 Link 的功能应用到.. 每次我点击 link 都没有任何反应，我已经尝试使用 href class，使用 to="/link" 但仍然没有任何反应。

更清楚地说，我想单击 link 并呈现不同的页面。现在我点击 link 没有任何变化。

Answer 1

使用 as 道具保留 Bootstrap 样式但使用 react-router-dom 的 Link

<Nav.Link to="/" as={Link}>Home</Nav.Link>

链接未使用 Bootstrap React NavBar 组件路由

Links not Routing with Bootstrap React NavBar Component

reactjs

react-bootstrap

react-router