リアクタルータRedux - コンポーネントがレンダリングしない

Question

私は最新のreact-router-redux（v5）を動作させようとしていますが、コンポーネントをレンダリングしません。レンダリングされるのはホーム（/）のみです。私の他のルートのコンポーネントのブレークポイントは決してヒットしません。私はconnect（mapStateToProps、mapDispatchToProp）（Component）呼び出しを削除しただけで、まだ何もレンダリングされていません。

ブラウザバーのルートが変わります。 index.jsでProjectsをインポートするだけで、すべてのルーティングとナビを取り除いても問題はありません。私は認識していないよ、いくつかの非互換性がない限り、私はほぼ正確にコピーしてきました

は

https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux

のドキュメントから貼り付け？

コード

packages.json

"react": "15.5.4", 
"react-dom": "15.5.4", 
"history": "^4.6.3", 
"isomorphic-fetch": "^2.2.1", 
"prop-types": "^15.5.10", 
"react-redux": "^5.0.6", 
"react-router": "^4.1.2", 
"react-router-redux": "^5.0.0-alpha.6", 
"redux": "^3.7.2", 
"redux-logger": "^3.0.6", 
"redux-thunk": "^2.2.0", 

/index.js

import { Router, Route, IndexRoute, browserHistory } from 'react-router'; 
import { ConnectedRouter, routerReducer, routerMiddleware, push } from 'react-router-redux' 
import createHistory from 'history/createBrowserHistory' 

import React from 'react' 
import { render } from 'react-dom' 

import { createStore, applyMiddleware, combineReducers} from 'redux' 
import { Provider } from 'react-redux' 

import thunkMiddleware from 'redux-thunk'; 
import { createLogger } from 'redux-logger'; 


let routes = require('./routes').routes; 
import reducers from './reducers' 

const history = createHistory(); 
const routerMiddle = routerMiddleware(history); 

const store = createStore(
    combineReducers({ 
     ...reducers, 
     router: routerReducer 
    }, 
    applyMiddleware(
     routerMiddle, 
     thunkMiddleware, 
     createLogger() 
    )) 
) 

render(
     <Provider store={store}> 
       <ConnectedRouter history={history} > 
        {routes} 
       </ConnectedRouter> 
       {/* <Projects /> <-- This works if I comment out ConnectedRouter */} 
     </Provider> 
     , 
     document.getElementById('react-app') 
    ); 

/routes.js

import * as React from 'react'; 
import { Route } from 'react-router'; 
import { Layout } from './components/Layout'; 
import { Home } from './components/Home'; 
import { Projects } from './components/Projects'; 

export const routes = <Layout> 
    <Route exact path='/' component={ Home } /> 
    <Route path='projects' component={ Projects } /> 
</Layout>; 

/components/Projects.js

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 

class Projects extends Component { 
    render() { 
    //debugger; 
    return (
     <div>Woe is me</div> 
    ) 
    } 
} 

export default Projects; 

また、私はアクションがルート変更のために派遣されていることがわかります。

編集：

あまりにも多くの時間がによって行かないと私は忘れるだから何解決策は次のとおりです。

あなたのバージョンが正しいことを確認し、すぐに壊れたドキュメントのバージョンが正しいことを確認してください。

私は、ほとんどの最新の反応/反応ルータを使用して、旧式のドキュメントサイトを読んでいました。

Answer 1

私は反応ルータv4にアップグレードしたときに同様の問題があったと思うし、ルートコンポーネントでwithRouterを使って解決しました。

export default (
    <Router history={history} onUpdate={logPageView}> 
     <Root> 
      <Switch> 
      <Route exact path="/" component={Home} /> 
      <Route path="/about" component={About} /> 
      <Route path="/calculator" component={Calc} /> 
      <Route path="/how-it-works" component={HowItWorks} /> 
      <Route path="/get-landed" component={GetLanded} /> 
      <Route status={404} path="*" component={Home} /> 
      </Switch> 
     </Root> 
    </Router> 
); 

ルートコンポーネントをお持ちでない場合は、ルートのすべてのコンポーネントを試してください。私はからインスピレーションを得る

import { withRouter } from 'react-router' 
class Root extends React.Component { 
    ... 
} 

// Create a new component that is "connected" (to borrow redux 
// terminology) to the router. 
export default const RootWithRouter = withRouter(Root) 

ここではいくつかの他のリンク：

• https://github.com/mobxjs/mobx-react/issues/210#issuecomment-284209187
• https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md