我正在尝试使用最新的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路由器 .
1 回答
当我升级到react-router v4时,我认为我有类似的问题,我已经通过在我的根组件中使用
withRouter
解决了它 .如果您没有根组件,请尝试路由的所有组件 .
这里有一些我从中得到启发的其他链接:
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