反应路由器＆amp; redux更新状态，更改URL但不渲染路由

Question

最终更新。一切都按现在的方式运作！

github：https://tornado1979.github.io/movies-socket
1.更新react-router-redux - ＆gt; ＆＃34; react-router-redux＆＃34;：＆＃34; ^ 5.0.0-alpha.9＆＃34;
2.改变了我发送推送（位置）的方式如下：
const mapDispatchToProps = dispatch => bindActionCreators({ changeRoute: location => push(location), }, dispatch)

第二次更新：
1.看起来像react-router-redux：4.0.8在ReactDom.render上有问题......
2.更新到＆＃34; react-router-redux＆＃34;：＆＃34; ^ 5.0.0-alpha.9＆＃34;而且不再：

ReactDOM.render(... error

3。现在路由更新状态+ url +组件：
 （一个）。例如<Link to="/movies-socket/1111">2nd more info</Link>有效！  （b）中。例如changeRoute: location => dispatch(push(location)),起初工作但在react-router-redux/es/middleware.js上出错  Uncaught TypeError: Cannot read property 'type' of undefined：

我发送了这样的动作：

`const mapDispatchToProps = dispatch => bindActionCreators({
     alterViewMode: changeViewMode,
     searchMovies: searchMoviesRequest,
     changeRoute: location => dispatch(push(location)),
 }, dispatch)`

第一次更新：
我把它住在github：https://tornado1979.github.io/movies-socket/。

1. 搜索电影

2. 点击电影按钮或链接（网址更改，本地我得到错误按钮没有错误链接虽然）。

3. 当我点击＆＃39;按钮＆＃39;：
   

4. 点击发出错误：
   我努力更新路由更改的状态，到目前为止我只管理更新状态，网址拒绝更新。 在我发现的大多数教程中，他们使用ReactDOM.render（....）在同一文件上创建商店，但我将它们分开，我创建商店并将其导入index.js。

store.js

import { createStore, applyMiddleware, compose, combineReducers } from 'redux'
import { routerMiddleware, routerReducer } from 'react-router-redux'
import createSagaMiddleware from 'redux-saga'
import thunk from 'redux-thunk'
import saga from './sagas'

import { moviesReducer as movies } from './modules/home/reducers/movies'
import { reducer as display } from './components/viewMode/reducers/viewMode'
import { history } from './helpers/history'

const routingMiddleware = routerMiddleware(history)
const sagaMiddleware = createSagaMiddleware()

const enhancers = []
const middleware = [
  routingMiddleware,
  sagaMiddleware,
  thunk,
]
if (process.env.NODE_ENV === 'development') {
  const devToolsExtension = window.devToolsExtension 

if (typeof devToolsExtension === 'function') {
  enhancers.push(devToolsExtension())
 }
 }

const composedEnhancers = compose(
 applyMiddleware(...middleware),
 ...enhancers,
)

const store = createStore(
  combineReducers({
   display,
   movies,
   routing: routerReducer,
  }),
  composedEnhancers,
 )

  // start sagaMiddleware
  sagaMiddleware.run(saga)

  export default store

index.js ##

我尝试使用路由器或ConnectedRouter或路由器来反应路由器，但没有运气。

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { syncHistoryWithStore } from 'react-router-redux'

// 1. updates state , does not change url, error : TypeError: Cannot read property 'type' of undef
import { Router } from 'react-router-dom'

// 2. Element type is invalid: expected a string (for built-in components) 
   ... index.js
// import { ConnectedRouter as Router, syncHistoryWithStore } from 'react- 
   router-redux'

// 3. updates state , does not change url, error : TypeError: Cannot read 
   property 'type' of undef
// import { Router } from 'react-router'
import { history as browserHistory } from './helpers/history'

import store from './store'

import './index.css'
import App from './App'

const history = syncHistoryWithStore(browserHistory, store)

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

app.js

import React, { Fragment } from 'react'
import './App.scss'

import { Routes } from './components/routes'
import { Footer } from './components/footer'
import { Header } from './components/header'

const App = () =>
(
<div className="App">
  <Fragment>
    <Header />
    <Routes />
    <Footer bgTemplate="template1" />
  </Fragment>
</div>)

export default App

history.js

import createHistory from 'history/createBrowserHistory'

export const history = createHistory()

history.listen((location, action) => {
  console.log(`The current URL is 
  ${location.pathname}${location.search}${location.hash}`)
    console.log(`The last navigation action was ${action}`)
  })

在 home.js 内，我发送推送（＆＃39; /＆＃39;）操作，该操作会更新状态，但不会加载＆＃ 39;的 moviedetails ＆＃39;组件也不是 url ：

我展示了一些主页＆＃39; home.js＆＃39;

 /*dispatch the push action to change route*/
 const mapDispatchToProps = dispatch => bindActionCreators({  
  alterViewMode: changeViewMode,  
  searchMovies: searchMoviesRequest,   
  changeRoute: location => dispatch(push(location)),/* should go to 
  ':/movieId' */  
 }, dispatch)  


  /* Click the button or Link to redirect user to movie details*/
  /* this updates the state on both cases but not the url*/
  <div>
 <p className="panel-text">{movie.overview}</p>
    <button className="view-more" onClick={() => 
       this.props.changeRoute('/11111')}>1st more info </button>
          <Link to="/1111">2nd more info</Link>
        </div>

我在这里可以错过什么，我不能让它工作？感谢。