Каким образом можно в компоненте-контейнере управлять URI react-redux-router v4?

Question

[Кирилл Горлов]

react-create-app был создан проект и выкат конфигов для webpack.
Собрано все по рекомендации многих ютуберов (в том числе и зарубежных)
Те кто занимается этим давно - трудности не составит.

В общем - как сделать так чтобы любой компонент или контейнер мог менять URI и вообще управлять роутингом внутри приложения из любого места без многочисленного проброса потомкам this.props.history, который позволяет вызвать this.props.history.push('/catalog/')

Зачем все это нужно?

Организация поисковой строки на сайте (это отдельный независимый компонент, который можно встроить куда угодно)
К примеру: мы на главной странице, есть строка поиска, мы вводим запрос и жмем "найти", нас с URI = / перекидывает на URI = /catalog/all?q=<строка_запроса>
Второй случай: находимся внутри категории URI = /catalog/auto, и хотим поискать внутри, то после отправки поискового запроса будет нечто такое URI = /catalog/auto?q=<строка_запроса>

Сама структура проекта:
index.js - инициализирует все приложение
App.js подключает роуты
routes/index.js - список роутов и компонентов

const routes = (
  <main>
    <Header />
    <Switch>
      <Route exact path="/" component={props => <Index {...this.props} />} />
      <Route exact path="/catalog" component={Catalog} />
      <Route exact path="/catalog/:category" component={Catalog} />
      <Route exact path="/catalog/:category/:product" component={Product} />
    </Switch>
    <Footer />
  </main>
)

В этом месте кода еще есть тот самый this.props.history
Далее я передаю props в компонент Index чтобы там дальше передать в компонент Search и при Нажатии на Энтер или клике по Лупе он бы меня отправил на другой URI, но - кто бы мог подумать, this.props.history теряется, и вообще такой способ нерентабелен для ReactRedux приложения. По-любому существует другой способ через mapDispatchToProps или StateToProps, но я никак не могу найти решение.

Answer 1

[Максим Корольский]

import { createStore, combineReducers, applyMiddleware } from 'redux';
import { routerMiddleware, push } from 'react-router-redux'

const middleware = routerMiddleware(browserHistory)
const store = createStore(
  reducers,
  applyMiddleware(middleware)
)

store.dispatch(push('/foo'))

И диспатчить откуда душе угодно

Comments

[Кирилл Горлов]

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

https://github.com/supasate/connected-react-router...

У меня именно connected-react-router, так как он больше всего поддерживает (поддерживал) react-router v4+

[Максим Корольский]

Что тут запутаного, подключаете и пушите

[Mikhail Osher]

Поддерживаю. Всё очень просто делается.

[Кирилл Горлов]

Вот от того что все так просто "подключаете и пушите" - собственно сложность и возникает =)