Question

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

单击<Link />按钮时，效果很好，URL也在更改，路由也在更改。

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

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

任何帮助都会感激不尽，

谢谢

Answer 1

大量的反模式代码，不良的应用程序结构以及程序包的混合使您的应用程序受阻。

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

将应用程序文件夹的结构重新配置为标准结构。
请勿将Router（BrowserRouter）与ConnectedRouter混合使用。
不要将您所有的components放在App.js文件中。
由于始终安装Header，因此不需要redux，而只需使用withRouter（它将路由道具暴露给组件）。
您的rootReducer缺少reducer，所以我添加了一个dummyReducer，它只返回state。
导航时粘到Link或this.props.history。对于此示例，无需同时使用两者。另外，您不需要使用ConnectedRouter的{{1}}函数，因为使用push时，history是作为道具传递的。

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

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

components / Header.js

string

routes / index.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);

components / App.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>
);

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

但是，我请勿建议这样做，因为当import React, { Fragment } from "react"; import Routes from "../routes"; import Header from "./Header"; export default () => ( <Fragment> <Header /> <Routes /> </Fragment> );已经作为道具从history传递或可以在使用{ {1}}。根据Redux docs的说法，也不建议这样做。而不是使用Route或将withRouter道具传递给redux Link创建者，而不是通过redux状态进行程序化导航。

containers / Header.js

history

Answer 2

在阅读完整的线程react-router-redux's push() not rendering new route之后，我遇到了这个解决方案，您需要使用Router并将历史记录向下传递给您的应用程序，并且不要使用从多个文件创建，而只是从一个通用文件中导入

这是工作代码和框：push rendering the new route

连接到redux的react-router：可用于链接，但在分发push

2 个答案: