0
后我就是一个反应，终极版初学者。我创建了一个应用程序的反应没有终极版和集成阵营路由器V4。一切都很完美。阵营路由器V4不加载组件集成终极版
然后我整合终极版到应用程序，所以我可以共享状态。之后，我的路由器停止工作。所以我想解决这个问题，我应该综合反应路由器，终极版V5（其实我了解到，您不必添加反应路由器，终极版，使路由器的工作。它的存在更新关于路由器信息Redux的状态）。仍然路由器不工作。
当我点击后应载入路由器，浏览器URL更改为正确的路由器URL和终极版路由器状态改变来纠正路由器的链路（此反应使用开发工具观察）。如果我刷新页面，与路由器相关的组件将加载。我配置的终极版店
/**
* 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 { 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文件，其中我所说的路线
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')
);
基础文件
/**
* 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天:(。请帮帮我。谢谢。