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