我是反应和redux初学者。我创建了一个没有redux的反应应用程序，并集成了 React Router v4 。一切都很完美。
然后我将redux集成到应用程序中，以便我可以分享状态。在此之后我的路由器停止工作。所以我想解决这个问题我应该集成 react-router-redux v5 （我实际上已经了解到你不必添加react-router-redux来使路由器工作。它可以更新redux状态关于路由器信息）。仍然没有路由器工作。
当我点击应该加载路由器的链接时，浏览器URL会更改为正确的路由器URL并且redux路由器状态更改为正确的路由器（使用react开发工具观察此情况）。如果我刷新页面，将加载与路由器相关的组件。
我配置了redux商店的文件
/**
* Created by Shane on 5/12/2017.
*/
import { createStore,combineReducers,applyMiddleware,compose } from 'redux'
import {authenticationReducer} from './../reducers/index'
import { reducer as formReducer } from 'redux-form'
import thunk from 'redux-thunk'
import { routerReducer, routerMiddleware } from 'react-router-redux'
import createHistory from 'history/createBrowserHistory'
// Create a history of your choosing (we're using a browser history in this case)
const history = createHistory();
let configureStore = () => {
const persistedState = localStorage.getItem('reduxState') ? JSON.parse(localStorage.getItem('reduxState')) : {};
let reducer=combineReducers({
authenticationData:authenticationReducer,
router:routerReducer,
form: formReducer // <---- Mounted at 'form'
});
//creating the store using reducer
let store=createStore(reducer,
persistedState,
compose(applyMiddleware(thunk,routerMiddleware(history)),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()));
store.subscribe(() => {
// console.log("Current State",store.getState());
localStorage.setItem('reduxState', JSON.stringify(store.getState()))
});
return store;
};
module.exports ={
history,
configureStore
};
这是我的主要文件
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import {Provider} from 'react-redux'
import Base from './base/Base';
import 'mdi/css/materialdesignicons.css'
import './index.css';
import * as storeConfig from './redux/store/store'
import { ConnectedRouter } from 'react-router-redux'
import createHistory from 'history/createBrowserHistory'
let store=storeConfig.configureStore();
const history = storeConfig.history;
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<Base />
</ConnectedRouter>
</Provider>,
document.getElementById('root')
);
我定义路线的基础文件
import React from 'react';
import { Grid } from 'react-bootstrap';
import { Row } from 'react-bootstrap';
import { Col } from 'react-bootstrap';
import {connect} from 'react-redux'
import Content from '../Content';
import AppNavBar from '../nav_bar/app_nav_bar/AppNavBar';
import './Base.css';
import Login from "../login/Login";
import Profile from "../profile/Profile";
import MyApps from "../my_apps/MyApps";
import NewAppBase from "../new_app/new_app_base/NewAppBase";
import {Route} from "react-router";
class Base extends React.Component {
constructor(props) {
super(props);
// this.state = { isLogged: true } ;
}
render() {
//let {dispatch} =this.props;
let content=(<div></div>);
// dispatch(action.apiLogIn("y2kshane","Abcd1234"));
if(this.props.isLogged)
{
content=(
<Grid className="Parent-container">
<Row>
<Col xs={12} md={12}> <AppNavBar/></Col>
</Row>
<Row >
<Col xs={12} md={12} className="content">
{/*<Content/>*/}
<Route exact path='/profile' component={Profile}/>
<Route exact path='/my-apps' component={MyApps}/>
<Route exact path='/new-app' component={NewAppBase}/>
</Col>
</Row>
</Grid>
);
}else {
content=(<Login/>);
}
return (
<span>{content}</span>
);
}
}
export default connect((state) => {
return {
isLogged:state.authenticationData.isLogged
}
})(Base);
我调用路线的AppNavBar文件
/**
* Created by admin on 4/27/2017.
*/
import React, { Component } from 'react';
import { Navbar } from 'react-bootstrap';
import { Nav } from 'react-bootstrap';
import { NavItem,NavDropdown,MenuItem } from 'react-bootstrap';
import './AppNavBar.css';
import {connect} from "react-redux";
import * as action from './../../redux/actions/index'
import {push} from "react-router-redux";
class AppNavBar extends Component {
constructor(props) {
super(props);
// this.state = { isLogged: true } ;
// this.navigateTo.bind(this);
}
logout = () => {
console.log("calling logot");
this.props.dispatch(action.logoutAction())
};
navigateTo = (url) =>
{
this.props.dispatch(push(url))
};
render() {
return (
<Navbar className="nav-bar" collapseOnSelect>
<Navbar.Header >
<Navbar.Brand className="nav-bar-text">
<a href="#">Dev Dashboard</a>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
{/*<LinkContainer to="/profile">*/}
<NavItem eventKey={1} onClick={() => this.navigateTo("/profile")}>Profile</NavItem>
{/*</LinkContainer>*/}
{/*<LinkContainer to="/my-apps">*/}
<NavItem eventKey={2} onClick={() => this.navigateTo("/my-apps")}>My Apps</NavItem>
{/*</LinkContainer>*/}
<NavItem eventKey={2} href="#" className="nav-bar-text">Reports</NavItem>
<NavItem eventKey={2} href="#" className="nav-bar-text">API Browser</NavItem>
<NavItem eventKey={2} href="#" className="nav-bar-text">Knowledge Base</NavItem>
</Nav>
<Nav pullRight>
<NavDropdown eventKey={3} title={this.props.username} id="basic-nav-dropdown">
{/*<NavBarUser/>*/}
<MenuItem eventKey={3.1}>Settings</MenuItem>
{/*<MenuItem eventKey={3.2}>Another action</MenuItem>*/}
{/*<MenuItem eventKey={3.3}>Something else here</MenuItem>*/}
<MenuItem divider />
<MenuItem eventKey={3.3} onClick={this.logout} ><b>Logout</b></MenuItem>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}
export default connect(
(state) => {
return {
username : state.authenticationData.userName
}
}
)(AppNavBar);
我一直试图解决这个问题2天了:(。请帮帮我。谢谢。
答案 0 :(得分：1)
所以事实证明你必须使用 withRouter 来包装包含路线的组件。我认为这是与redux connect相关的一些问题。
export default withRouter(connect((state) => {
return {
isLogged:state.authenticationData.isLogged
}
})(Base));
完整代码
import React from 'react';
import { Grid } from 'react-bootstrap';
import { Row } from 'react-bootstrap';
import { Col } from 'react-bootstrap';
import {connect} from 'react-redux'
import Content from '../Content';
import AppNavBar from '../nav_bar/app_nav_bar/AppNavBar';
import './Base.css';
import Login from "../login/Login";
import Profile from "../profile/Profile";
import MyApps from "../my_apps/MyApps";
import NewAppBase from "../new_app/new_app_base/NewAppBase";
import {Route, withRouter} from "react-router-dom";
class Base extends React.Component {
constructor(props) {
super(props);
// this.state = { isLogged: true } ;
}
render() {
//let {dispatch} =this.props;
let content=(<div></div>);
// dispatch(action.apiLogIn("y2kshane","Abcd1234"));
if(this.props.isLogged)
{
content=(
<Grid className="Parent-container">
<Row>
<Col xs={12} md={12}> <AppNavBar/></Col>
</Row>
<Row >
<Col xs={12} md={12} className="content">
{/*<Content/>*/}
<Route exact path='/profile' component={Profile}/>
<Route exact path='/my-apps' component={MyApps}/>
<Route exact path='/new-app' component={NewAppBase}/>
</Col>
</Row>
</Grid>
);
}else {
content=(<Login/>);
}
return (
<span>{content}</span>
);
}
}
export default withRouter(connect((state) => {
return {
isLogged:state.authenticationData.isLogged
}
})(Base));