react-router连接到redux：与链接一起工作，但只有在调度push时才更改URL

Question

我正在尝试以编程方式推送URL以使用react-router，redux和connected-react-router进行导航

单击<Link />按钮时，它工作正常，URL正在变化，路径也在变化。

但是当使用dispatch(push(url)) ，URL只会更改，内容不会更新

我在这里做了一个小例子。

任何帮助都会非常感激，

谢谢

Answer 1

许多反模式代码，糟糕的应用程序结构以及包的混合都会阻碍您的应用程序。

我完全重写了这个，这就是我所做的：

1. 重新配置应用程序文件夹的结构是标准的。
2. 不要将Router （ BrowserRouter ）与ConnectedRouter混合使用。
3. 不要将所有components放在App.js文件中。
4. 由于Header总是被挂载，所以你不需要redux ，而只需使用withRouter （它将路径道具暴露给组件）。
5. 你的rootReducer缺少一个reducer ，所以我添加了一个只返回state的dummyReducer 。
6. 导航时坚持Link或this.props.history 。 对于此示例，不需要同时使用两者。 此外，您不需要使用ConnectedRouter的push功能，因为在使用withRouter时history作为道具传递。

旁注：如果您希望Header成为所有路径更改通过的“路由器”，那么您需要创建一个action和一个传递string并将其存储到redux store的reducer 。 然后connect Header connect到redux存储，并在此string更改时更新route 。

工作示例： https ： //codesandbox.io/s/526p7kjqq4

组件/ Header.js

import React, { PureComponent, Fragment } from "react";
import { withRouter } from "react-router-dom";

class Header extends PureComponent {
  goTo = route => {
    this.props.history.push(route);
  };

  render = () => (
    <Fragment>
      <ul>
        <li>
          <button onClick={() => this.goTo("/")}> Announcements </button>
        </li>
        <li>
          <button onClick={() => this.goTo("/shopping")}> Shopping </button>
        </li>
      </ul>

      <div>
        <button onClick={() => this.goTo("/shopping")}>
          Click here to go shopping ! (if you can...)
        </button>
      </div>
    </Fragment>
  );
}

export default withRouter(Header);

路线/ index.js

import React from "react";
import { Switch, Route } from "react-router-dom";
import Announcements from "../components/annoucements";
import Shopping from "../components/shopping";

export default () => (
  <div style={{ padding: "150px" }}>
    <Switch>
      <Route exact path="/" component={Announcements} />
      <Route path="/shopping" component={Shopping} />
    </Switch>
  </div>
);

组件/ App.js

import React, { Fragment } from "react";
import Routes from "../routes";
import Header from "./Header";

export default () => (
  <Fragment>
    <Header />
    <Routes />
  </Fragment>
);

---

以下是您要完成的任务： https ： //codesandbox.io/s/8nmp95y8r2

但是，我不建议这样做 ，因为它是一个有点多余，当history或者是从一个道具已通过Route或者可以使用时暴露withRouter 。 根据Redux 文档 ，也不建议使用。 而是使用Link或将history道具传递给redux action创建者而不是通过redux状态进行编程导航。

集装箱/ Header.js

import React, { PureComponent, Fragment } from "react";
import { connect } from "react-redux";
import { push } from "connected-react-router";

class Header extends PureComponent {
  goTo = route => this.props.push(route); // this is equivalent to this.props.dispatch(push(route)) -- I'm just appending dispatch to the push function in the connect function below

  render = () => (
    <Fragment>
      <ul>
        <li>
          <button onClick={() => this.goTo("/")}> Announcements </button>
        </li>
        <li>
          <button onClick={() => this.goTo("/shopping")}> Shopping </button>
        </li>
      </ul>

      <div>
        <button onClick={() => this.goTo("/shopping")}>
          Click here to go shopping ! (if you can...)
        </button>
      </div>
    </Fragment>
  );
}

export default connect(
  null,
  { push }
)(Header);

Answer 2

在阅读完整的线程react-router-redux的push（）没有呈现新路由之后 ，我遇到了这个解决方案，您需要使用路由器将历史记录作为支撑下传到您的应用程序，并且不要使用来自多个文件的创建只需导入它来自一个普通文件。

这是工作代码框： 推送渲染新路线