时间戳

首页 > 解决方案 > 为什么当窗口位置改变时反应路由器开关不起作用？

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

问题描述

当我使用 Redirects、Navlinks 或其他图书馆工作人员时，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);

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

标签： reactjsreact-router

解决方案

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

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

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

推荐阅读