链接不使用 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 导航栏并简单地使用带有“链接到...”语法的 ul 时，我能够获得我想要的功能。

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

为了更清楚，我想点击一个链接并呈现一个不同的页面。现在我点击链接，没有任何变化。

Answer 1

使用as 属性保留Bootstrap 样式，但使用react-router-dom 的Link

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