react-router-redux, метод push не работает

Вы пробовали?

handleClick(e) {
   e.preventDefault();
   this.props.history.push('/#/detail/' + id);

}

Скажите мне, работает это или нет, и соответственно обновите ответ.

Или, если вы хотите попробовать перейти за пределы компонентов, попробуйте это.

Также попробуйте установить маршрут:

 <Route path="/preview" component={Preview} />

Это может дать вам историческую опору.

вы пропустите routerMiddleware. Прекрасно работает после применения routerMiddleware.

import { browserHistory } from 'react-router';
import { routerReducer, routerMiddleware } from 'react-router-redux';
...
const finalCreateStore = compose(
  applyMiddleware(
      ThunkMiddleware, 
      FetchMiddleware, 
      routerMiddleware(browserHistory)
  ),
  DevTools.instrument(),
)(createStore);


const reducer = combineReducers({
  ...rootReducer,
  routing: routerReducer,
});

export default function configureStore(initialState) {
  const store = finalCreateStore(reducer, initialState);
  return store;
}

Прочтите этот раздел документации — https://github.com/reactjs/react-router-redux#what-if-i-want-to-issue-navigation-events-via-redux-actions

Если вы хотите перейти к другому маршруту, попробуйте Proptypes, например:

import React, { Component, PropTypes } from 'react';

class Preview extends Component {
        ...
  static contextTypes = {
    router: PropTypes.object
  };
  handleNavigate(id,e) {
    e.preventDefault();
    this.context.router.push(`/#/detail/${id}`);
  }
        ...
}

У меня была такая же проблема с react-router-redux, и я решил ее следующим образом.

Необходимо использовать Router, а не BrowserRouter. Объект history должен быть создан с помощью метода createBrowserHistory, импортированного из пакета history.

Затем историю необходимо синхронизировать с магазином методом syncHistoryWithStore, импортированным из react-router-redux. Этот новый объект истории будет передан Router.

Затем инициализируйте routerMiddleware, передав ему объект синхронизированной истории.

Пожалуйста, проверьте этот код:

store.js

import createSagaMiddleware from 'redux-saga';
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import { routerReducer, routerMiddleware as reduxRouterMiddleware } from 'react-router-redux';
import { category, machine, machines, core } from './reducers';
import rootSaga from './sagas';

const rootReducer = combineReducers({
    category,
    machines,
    machine,
    core,
    routing: routerReducer,
});


const initStore = (history = {}) => {
    const sagaMiddleware = createSagaMiddleware();
    const routerMiddleware = reduxRouterMiddleware(history);

    const store = createStore(
        rootReducer, 
        applyMiddleware(
            sagaMiddleware, 
            routerMiddleware
        )
    );

    sagaMiddleware.run(rootSaga);

    return store;
}

export default initStore;

app.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router';
import { Provider } from 'react-redux';
import { createBrowserHistory } from 'history';
import { syncHistoryWithStore } from 'react-router-redux';

import './index.css';
import App from './App';
import initStore from './store';
import * as serviceWorker from './serviceWorker';

const browserHistory = createBrowserHistory();

const store = initStore(browserHistory)
const history = syncHistoryWithStore(browserHistory, store);

ReactDOM.render(
    <Provider store={store}>
        <Router history={history}>
            <App />
        </Router>
    </Provider>,
    document.getElementById('root')
);

serviceWorker.unregister();

Для подключенного маршрутизатора React требуется React 16.4 и React Redux 6.0 или более поздней версии.

$ npm install --save connected-react-router

Or

$ yarn add connected-react-router

Использование Шаг 1

В вашем корневом файле редуктора

Создайте функцию, которая принимает историю в качестве аргумента и возвращает корневой редуктор. Добавьте редуктор маршрутизатора в корневой редуктор, передав историю в connectRouter. Примечание. Ключ ДОЛЖЕН быть маршрутизатором.

// reducers.js

import { combineReducers } from 'redux'
import { connectRouter } from 'connected-react-router'

const createRootReducer = (history) => combineReducers({
  router: connectRouter(history),
  ... // rest of your reducers
})
export default createRootReducer

Шаг 2

При создании магазина Redux

Создайте объект истории. Предоставьте созданную историю создателю корневого редуктора. Используйте routerMiddleware(history), если вы хотите отправлять действия истории (например, чтобы изменить URL-адрес с помощью push('/path/to/somewhere')).

// configureStore.js

import { createBrowserHistory } from 'history'
import { applyMiddleware, compose, createStore } from 'redux'
import { routerMiddleware } from 'connected-react-router'
import createRootReducer from './reducers'
...
export const history = createBrowserHistory()

export default function configureStore(preloadedState) {
  const store = createStore(
    createRootReducer(history), // root reducer with router state
    preloadedState,
    compose(
      applyMiddleware(
        routerMiddleware(history), // for dispatching history actions
        // ... other middlewares ...
      ),
    ),
  )

  return store
}

Шаг 3

Оберните маршрутизацию вашего реактивного маршрутизатора v4/v5 с помощью ConnectedRouter и передайте объект истории в качестве реквизита. Не забудьте удалить любое использование BrowserRouter или NativeRouter, так как оставление этого вызовет проблемы с синхронизацией состояния. Поместите ConnectedRouter в качестве дочернего элемента провайдера react-redux. Н.Б. Если вы выполняете рендеринг на стороне сервера, вы все равно должны использовать StaticRouter из react-router на сервере.

// index.js

import { Provider } from 'react-redux'
import { Route, Switch } from 'react-router' // react-router v4/v5
import { ConnectedRouter } from 'connected-react-router'
import configureStore, { history } from './configureStore'
...
const store = configureStore(/* provide initial state if any */)

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}> { /* place ConnectedRouter under Provider */ }
      <> { /* your usual react-router v4/v5 routing */ }
        <Switch>
          <Route exact path="/" render={() => (<div>Match</div>)} />
          <Route render={() => (<div>Miss</div>)} />
        </Switch>
      </>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('react-root')
)