reactjs - react 路由器连接到redux : works with links but only the URL change when dispatching push

Question

我正在尝试以编程方式推送 URL 以使用 React-Router、Redux 和 Connected-React-Router 进行导航

当点击 <Link /> 时按钮，它工作得很好，URL 和路由也在改变。

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

我做了一个最小的例子here .

任何帮助将非常感激，

谢谢

Answer 1

大量反模式代码、糟糕的应用程序结构以及包的混合正在阻碍您的应用程序。

我完全重写了它，这就是我所做的:

1. 将应用程序文件夹的结构重新配置为标准。
2. 请勿混合 Router ( BrowserRouter ) 与 ConnectedRouter .
3. 不要将所有 components App.js内文件。
4. 自 Header总是挂载的，你不需要redux ，您可以只使用 withRouter (它向组件公开了路由属性)。
5. 您的rootReducer缺少 reducer ，所以我添加了 dummyReducer只返回 state .
6. 坚持Link或this.props.history导航时。对于本示例，无需同时使用两者。另外，您不需要使用 ConnectedRouter的push函数，因为 history使用 withRouter 时作为 prop 传递.

旁注:如果您想要Header要成为所有路由更改都经过这里的“路由器”，那么您需要创建一个 action和一个 reducer通过 string并将其存储到 redux 的 store 。 Header那么 connect编辑到 redux 存储并更新 route当这个string已改变。

工作示例: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);

routes/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 的 prop 传递或者使用withRouter时可以暴露。根据 Redux docs ，也不推荐。而不是使用 Link或通过history支持 redux action创建者而不是通过 redux 状态进行编程导航。

containers/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);