Reactjs react router redux，推送方法不起作用

我正在使用react路由器redux

我不知道如何创建演示来简单地描述这个问题。 我在Github上推送所有代码。

a-href

运行良好。 @

现在，推送方法不起作用。
@

我编辑代码并在GitHub上更新它

我导入

hashHistory

hashHistory.push（'detail/'+id）工作正常。

disPatchpush
@
它不起作用

在
Home.js
中：

  @connect(state => {
  return {
    list:state.home.list,

  };
}, dispatch => {

  return {
    actions: bindActionCreators(actions, dispatch),
    dispatchPush:  bindActionCreators(push, dispatch),
  }
})

dispatchPush
从
Home.js
传递到
PreviewList
到
Preview
您试用过吗

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

}

告诉我它是否有效，并将相应地更新答案

或者，如果要尝试在组件外部导航，请尝试

还可以尝试设置路线：

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



这可能会让你获得历史道具。
你的道具试过了吗

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

}

告诉我它是否有效，并将相应地更新答案

或者，如果要尝试在组件外部导航，请尝试

还可以尝试设置路线：

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



这可能会让您获得历史道具。
如果您想导航到另一条路线，请尝试道具类型，如下所示：

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}`);
  }
        ...
}

如果要导航到其他路线，请尝试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}`);
  }
        ...
}

你错过了routerMiddleware。在应用RouterMiddware后，效果非常好

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;
}

阅读文档的这一部分-
您将错过RouterMiddware。在应用RouterMiddware后，效果非常好

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;
}

阅读文档的这一部分-
我遇到了与
react router redux
相同的问题，并通过以下方式解决

需要使用
路由器
而不是
浏览器路由器
。必须使用从
history
包导入的
createBrowserHistory
方法创建
history
对象

然后，必须使用从
react router redux
导入的
syncHistoryWithStore
方法将历史记录与存储同步。这个新的历史对象将被传递到
路由器

然后初始化
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;

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();

app.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;

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；
从“react dom”导入react dom；
从“react Router”导入{Router}；
从'react redux'导入{Provider}；
从“历史”导入{createBrowserHistory}；
从“react router redux”导入{syncHistoryWithStore}；
导入“./index.css”；
从“./App”导入应用程序；
从“/store”导入initStore；
将*作为serviceWorker从“/serviceWorker”导入；
const browserHistory=createBrowserHistory（）；
const store=initStore（浏览器历史记录）
const history=syncHistoryWithStore（浏览器历史记录，存储）；
ReactDOM.render(
,
document.getElementById（'root'））
);
serviceWorker.unregister（）；
我在
react router redux
中遇到了同样的问题，并通过以下方式解决了

需要使用
路由器
而不是
浏览器路由器
。必须使用从
history
包导入的
createBrowserHistory
方法创建
history
对象

然后，必须使用从
react router redux
导入的
syncHistoryWithStore
方法将历史记录与存储同步。这个新的历史对象将被传递到
路由器

然后初始化
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;

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();

app.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;

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；
从“react dom”导入react dom；
从“react Router”导入{Router}；
从'react redux'导入{Provider}；
从“历史”导入{createBrowserHistory}；
从“react router redux”导入{syncHistoryWithStore}；
导入“./index.css”；
从“./App”导入应用程序；
从“/store”导入initStore；
将*作为serviceWorker从“/serviceWorker”导入；
const browserHistory=createBrowserHistory（）；
const store=initStore（浏览器历史记录）
const history=syncHistoryWithStore（浏览器历史记录，存储）；
ReactDOM.render(
,
document.getElementById（'root'））
);
serviceWorker.unregister（）；
连接的React路由器需要React 16.4和React Redux 6.0或更高版本

$ npm install --save connected-react-router

或

用法
第一步

在根目录文件中

创建一个将历史记录作为参数并返回根减缩器的函数。
通过将历史记录传递给connectRouter，将router reducer添加到根reducer中。
注意：密钥必须是路由器

// 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存储时

创建一个历史对象。
向根还原器创建者提供创建的历史记录。
如果要分派历史记录操作（例如，使用push（'/path/to/where'）更改URL），请使用routerMiddleware（历史记录）

步骤3

使用ConnectedRouter包装react路由器v4/v5路由，并将历史对象作为道具传递。请记住删除BrowserRouter或NativeRouter的任何用法，因为将其保留在中会导致同步状态出现问题。
将ConnectedRouter作为react redux提供程序的子级放置。
注意：如果进行服务器端渲染，您仍应使用服务器上react router的StaticRouter

// 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')
)

//index.js
从“react redux”导入{Provider}
从'react router'//react router v4/v5导入{Route，Switch}
从“已连接路由器”导入{ConnectedRouter}
从“/configureStore”导入configureStore，{history}
...
const store=configureStore（/*如果有，请提供初始状态*/）
ReactDOM.render(
{/*将ConnectedRouter放在提供程序下*/}
{/*您常用的react路由器v4/v5路由*/}
（匹配）}/>
（小姐）}/>
,
document.getElementBy