Реактив-роутер подключен к избыточному: работает со ссылками, но только изменение URL при отправке push

Question

Я пытаюсь программно выдвинуть URL-адрес для навигации по реагирующему маршрутизатору, редуксу и подключенному реагирующему маршрутизатору.

При нажатии на <Link /> кнопка работает отлично, URL меняется и маршрут тоже.

Но при использовании dispatch(push(url), URL только меняется, а контент не обновляется

Я сделал минимальный пример здесь.

Любая помощь будет очень благодарна,

Спасибо

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"s push функция, потому что history передается как опора при использовании withRouter,

Примечание: если вы хотите Header чтобы быть "маршрутизатором", через который проходят все изменения маршрута, вам нужно создать action и reducer который проходит string и хранит его в редуксе store, Header затем connectедет в магазин редуксов и обновляет 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, это тоже не рекомендуется. И вместо того, чтобы использовать Link или передать history опора к редуксу action Создатель вместо программной навигации по избыточному состоянию.

Контейнеры /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

Прочитав весь поток потем () рендеринг-маршрутизатора-редукса, не отображающий новый маршрут, я наткнулся на это решение: вам нужно использовать маршрутизатор с передачей истории в качестве опоры для вашего приложения и не использовать создание из нескольких файлов, просто импортируйте его из общего файла.

Вот рабочие коды andbox: push рендеринг нового маршрута