javascript - 反应路由器和redux更新状态，更改url但不渲染路由

Question

最后更新。现在一切正常！

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

第二次更新：
1. 看起来 react-router-redux: 4.0.8 在 ReactDom.render 上有问题...
2. 更新为 "react-router-redux": "^5.0.0-alpha.9" 不再有：

ReactDOM.render(... error

3. 现在路由更新状态+url+组件：
(a)。例如<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. 当我点击“按钮”时：
   

4. 单击给出了该错误：
   我努力更新路由更改的状态，到目前为止，我只设法更新状态，url 拒绝更新。在我发现的大多数教程中，他们使用 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 ##

我从 react-router 尝试了 Router 或 ConnectedRouter 或 Router ，但没有成功。

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

应用程序.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

历史.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中，我调度push('/')动作，它更新状态但不加载“ moviedetails ”组件或url：

我展示了一些“home.js”的片段

 /*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>

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

标签： javascriptreactjsreduxreact-router-v4react-router-redux