React Router Redux - 組件永不渲染

Question

我正在嘗試使用最新的react-router-redux（v5）工作，但它永遠不會渲染我的組件。 獲得渲染的唯一一個是home（/）。 我的其他路線組件中的斷點永遠不會被擊中。 我甚至刪除了connect（mapStateToProps，mapDispatchToProp）（Component）調用（並且只做了一個非常簡單的組件） - 仍然沒有渲染。

瀏覽器欄中的路線發生變化。 如果我只是在index.js中導入項目，擺脫所有的路由和導航，它渲染得很好。

我幾乎完全從文檔中粘貼了

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;

此外，我可以看到正在為路由更改分派操作：

編輯：

因此，太多的時間不會消失，我忘了解決方案是什么：

請確認您的反映路由器的版本以及您所淹沒的文檔的版本是否正確。

我正在閱讀一個過時的文檔站點，使用幾乎最新的react / react路由器。

Answer 1

當我升級到react-router 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