您需要exact为 indexRoute指定属性，否则即使是/details路由，它仍将与/. 也尝试Route从react-router-dom

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route } from 'react-router-dom';
import Users from "./components/Users";

import Details from "./components/Details";

ReactDOM.render((
  <BrowserRouter>
    <div>
        <Route exact path="/" component={Users} />
        <Route path="/details" component={Details} />
    </div>
  </BrowserRouter>
), document.getElementById('app'))

更新：

您需要做的另一件事是使用withRouter. 你需要使用的withRouter，只有当你的组件不接受Router props，

如果您的组件是由 Router 渲染的组件的嵌套子组件，或者您没有将 Router props 传递给它，或者当组件根本没有链接到 Router 并且作为单独的组件渲染时，可能会发生这种情况。路线。

在 Users.js 添加

import {withRouter} from 'react-router';

.........
export default withRouter(Users)

文件

您只需要将组件包装在withRouter 中。

<Route exact path="/mypath" component={withRouter(MyComponent)} />

这是一个示例 App.js 文件：

...
import { BrowserRouter as Router, Route, Switch, withRouter } from "react-router-dom";
import Home from "./pages/Home";
import Profile from "./pages/Profile";

class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={withRouter(Home)} />
          <Route exact path="/profile" component={withRouter(Profile)} />
        </Switch>
      </Router>
    );
  }
}

export default App;

额外的

如果您使用的是 react 路由器，则只要 url 更改，就会调用componentWillReceiveProps。

componentWillReceiveProps(nextProps) {
    var currentProductId = nextProps.match.params.productId;
    var nextProductId = nextProps.match.params.productId; // from the new url
    ...
}

笔记

或者，您也可以在导出之前将组件包装在withRouter 中，但是您必须确保其他一些事情。我通常跳过这一步。

export default withRouter(Profile)

我遇到了同样的问题，发现这是因为我有一个嵌套的路由器。一旦我删除了嵌套的路由器，只需将我的特定于组件的路由放在一个交换机组件中——问题就得到了解决，而无需使用 withRouter 或进行任何额外的更改。

<Router> // <--Remove nested Router
    <Switch>
      <Route exact path="/workflows" component={ViewWorkflows} />
      <Route path="/workflows/new" component={NewWorkflow} />
    </Switch>
</Router>

Yusufbek 正在描述一个类似的问题。我认为将与组件相关的路由存储在视图级别比将它们全部存储在一个主路由器中要干净得多。在生产应用程序中，这将是太多的路线，无法轻松阅读和调试问题。

我遇到了同样的问题，但我修复了它。我把主页放在最后。这个对我有用。就像下面一样。

    import React from "react";
    import ReactDOM from "react-dom";
    import { BrowserRouter } from 'react-router-dom';
    import Users from "./components/Users";
    import { Router, Route } from "react-router";
    import Details from "./components/Details";

    ReactDOM.render((
      <BrowserRouter>
        <div>
            <Route path="/details" component={Details} />
            <Route path="/" component={Users} />
        </div>
      </BrowserRouter>
    ), document.getElementById('app'))

我有一个类似的问题，但结构不同。我添加了一个可以处理所有路由的路由器，我使用了 Switch 组件来切换视图。但实际上，并没有。仅更改 URL，但未查看。原因是在侧栏组件内部使用的链接组件位于路由器组件外部。（是的，我已经用“withRouter”导出了侧边栏，没有工作）。因此，解决方案是将包含所有 Link 组件的 SideBar 组件移动到我的路由器中。

问题出在我的链接器上，它们在我的路由器之外

<div className="_wrapper">
  <SideBar /> // Holds my all linkers
  <Router>
     <Switch>
       <Route path="/" component={Home} />
       <Route path="/users" component={Users} />
     </Switch>
  </Router>
 </div>

解决方案是将我的链接器移到我的路由器中

<div className="_wrapper">
  <Router>
     <SideBar /> // Holds my all linkers
     <Switch>
       <Route path="/" component={Home} />
       <Route path="/users" component={Users} />
     </Switch>
  </Router>
</div>