6

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

单击<Link />按钮时，它工作得很好，URL 正在改变，路线也在改变。

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

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

任何帮助将不胜感激，

谢谢

4

2 回答 2

6

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

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

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

旁注：如果您希望 成为Header所有路由更改都通过此处的“路由器”，那么您需要创建一个action和 areducer来传递 astring并将其存储到 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);

路线/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 docs，也不推荐这样做。而是使用propLink或将historyprop 传递给 reduxaction创建者，而不是通过 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);
于 2018-10-28T16:32:32.460 回答
0

在阅读了完整的线程react-router-redux 的 push() not rendering new route之后，我遇到了这个解决方案，您需要使用 Router 并将历史记录作为 prop down 传递给您的应用程序，并且不要使用从多个文件创建只需导入它从一个共同的文件。

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

于 2018-10-28T18:21:49.537 回答