Javascript React Router Redux-组件从不渲染

我试图让最新的react router redux（v5）正常工作，但它从未呈现我的组件。唯一被渲染的是home（/）。我的其他路由组件中的断点永远不会被命中。我甚至删除了connect（mapStateToProps，mapsDispatchToprop）（Component）调用（只做了一个非常简单的组件）——仍然没有呈现任何内容

“我的浏览器”栏中的管线将更改。如果我只是在index.js中导入项目，去掉所有的路由和导航，效果会很好

我几乎完全是从

除非有我不知道的不兼容

代码

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

从'react Router'导入{Router，Route，IndexRoute，browserHistory}；
从“react router redux”导入{ConnectedRouter、routerReducer、routerMiddleware、push}
从“历史记录/createBrowserHistory”导入createHistory
从“React”导入React
从'react dom'导入{render}
从“redux”导入{createStore、applyMiddleware、CombineReducer}
从“react redux”导入{Provider}
从“redux thunk”导入thunk中间件；
从“redux logger”导入{createLogger}；
let routes=require（“./routes”）。routes；
从“./还原程序”导入还原程序
const history=createHistory（）；
const routerMiddle=routerMiddle软件（历史）；
const store=createStore(
组合传感器({
…减速器，
路由器：路由器导出器
},
applyMiddleware(
routerMiddle，
Thunk，
createLogger（）
))
)
渲染(
{routes}
{/*我想我升级到react router v4时遇到了类似的问题，我在根组件中使用
with router
解决了这个问题

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 React, { Component } from 'react';
import { connect } from 'react-redux';

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

export default Projects;

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)