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;

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

编辑：

因此，太多的时间没有过去，我忘了解决方案是什么：

请确认您的反映路由器版本以及您所淹没的文档版本是否正确。

我正在阅读一个过时的文档网站，几乎使用最新的反应/反应路由器。

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)

这里有一些我从中受到启发的其他链接：

React Router Redux - 组件永不渲染

1 个答案: