响应路由器更改url，但不是视图

Question

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="/" component={Users} />
        <Route path="/details" component={Details} />
    </div>
  </BrowserRouter>
), document.getElementById('app'))

当我使用url/Details时，我的浏览器会导航到该url，但不会更改视图。任何其他路由抛出404，因此它似乎可以识别路由，但不能更新。

Answer 1

您需要为indexRoute指定属性exact，否则对于/detailsroute，它仍将与/匹配。还要尝试从react-router-dom导入route

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'))

更新：

您需要做的另一件事是使用wishrouter附加组件用户。只有当组件没有接收到路由器道具时，才需要使用wishrouter,

import {withRouter} from 'react-router';

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