为什么当窗口位置改变时反应路由器开关不起作用？

Question

当我使用重定向、导航链接或其他图书馆工作人员时，React 路由器开关工作正常。

问题出在 loadOrderPage 函数中。触发时，窗口位置更改正常，但页面不会根据 react-router 切换规则重新渲染，因此“/order”的组件在此功能完成后不会渲染。

这是我的简单反应类

此处的实时工作示例：https://codesandbox.io/s/delicate-wildflower-sdvd4?file=/src/App.js

import React from "react";
import {
  BrowserRouter as Router,
  Redirect,
  Route,
  Switch,
} from "react-router-dom";
import Startpage from "./components/startpage";
import Orderpage from "./components/orderpage";
import { withRouter } from "react-router";

class App extends React.Component {

.......

  loadOrderPage = () => {
    this.props.history.push("/order");
  };

  render() {

    return (
      <Router>
        <Switch>
          <Route path="/order">
            <Orderpage />
          </Route>
          <Route path="/">
            <Startpage/>
          </Route>
        </Switch>
      </Router>
    );
  }
}

export default withRouter(App);

怎么了？我希望能够更改函数中的窗口位置并等待反应路由器在切换规则下呈现正确的组件。可能有更合适的方法吗？

Answer 1

您不能在index.js 和App.js 中定义两个。从您的App.js 中删除<Router></Router>。

确保将exact 添加到您的<Route />。

<Route exact path="/order">
  <Orderpage />
</Route>
<Route exact path="/">
   <Startpage/>
</Route>