首先，在您的代码段中，您似乎没有将代码包装在 a 中Router，因此您应该确保在内部App或在 中执行此操作ReactDOM.render：

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>, 
  rootElement
  );

接下来，您的具体问题是您正在渲染 react-bootstrapNav.Link而不是 react-router 的Link组件，因此路由器没有接收您的路由更改。幸运的是，react-bootstrap 在它的大部分组件中都提供了一个渲染属性来指定如果你不想要默认的组件或元素，你想要渲染哪个组件或元素。切换到这样的事情：

import { Switch, Route, Link } from 'react-router-dom';

class Navigation extends Component {
  render() {
    return (
      <div>
        <div>
          <Navbar>
            <Navbar.Brand as={Link} to="/" >React-Bootstrap</Navbar.Brand>
            <Navbar.Collapse>
              <Nav className="mr-auto">
                <NavItem eventkey={1} href="/">
                  <Nav.Link as={Link} to="/" >Home</Nav.Link>
                </NavItem>
              </Nav>
              <Form inline>
                <FormControl type="text" placeholder="Search" className="mr-sm-2" />
                <Button variant="outline-success">Search</Button>
              </Form>
            </Navbar.Collapse>
          </Navbar>
        </div>
        <div>
          <Switch>
            <Route exact path='/' component={Home} />
            <Route render={function () {
              return <p>Not found</p>
            }} />
          </Switch>
        </div>
      </div>
    );
  }
}

对于那些在 react-bootstrap 导航栏中对样式Link组件有问题的人react-router-dom，只需添加className="nav-link"，如下所示：

<Link to="/" className="nav-link">Home</Link>

代替

<Nav.Link href="/">Home</Nav.Link>

我希望我不会迟到帮助其他一些试图解决这个问题的人。

您可以使用 NavLink，而不是 as={Link}。它将以与 Link 相同的行为呈现，但会“观察”路由器 URL 以定义哪个链接确实处于活动状态：

<Nav defaultActiveKey="/bills" as="ul">
      <Nav.Item as="li">
        <Nav.Link as={NavLink} to="/bills">Dividas</Nav.Link>
      </Nav.Item>
      <Nav.Item as="li">
        <Nav.Link as={NavLink} to="/other">Em construção</Nav.Link>
      </Nav.Item>
    </Nav>

import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);

和 Navbar.js：

import React from 'react';
import {Container,Navbar,Nav,NavItem } from 'react-bootstrap';
import {Link} from 'react-router-dom';

<Nav className="ml-auto">
<NavItem>   <Link className="nav-link"   to="/">Home</Link> </NavItem> 
<NavItem>   <Link  className="nav-link" to="/about">About</Link> </NavItem> 
<NavItem>    <Link className="nav-link"   to="/contact">Contact</Link> </NavItem> 
</Nav>

这解决了：<Link>在<Router>我之外的错误。

我发现自己有一个非平凡大小的项目，并且已经有 jQuery 作为依赖项，我能够优雅地解决 react-router / react-bootstrap 与document.

与其他解决方案相比，这有一个优势，即不需要更改当前标记。但是，可能需要根据需要编写一些额外的逻辑来保护history.push调用。人们可能还需要扩展它来保护target属性，例如target="_blank"。

如果不需要 jQuery，则可以编写一个普通的 JS 实现，document.addEventListener而无需太多额外的努力。

// react-router@5
// usage of history may vary depending on version
import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

// IIFE scoping jQuery for us
(($) => {
  // Wait for document ready
  $(() => {
    $(document).on('click', '[href]', (event) => {
      // Only target links targeting our application's origin
      if (event.currentTarget.href.indexOf(window.location.origin) === 0) {
        // Prevent standard browser navigation
        event.preventDefault();

        const path = event.currentTarget.href.slice(window.location.origin.length);

        history.push(path);
      }
    });
  });
})(jQuery);

const Routing = (props) => (
  <Router history={ history }>
    ...
  </Router>
);