导航到用户登录成功的主页反应+终极版+反应路由器,终极版
应用的要求是这样的:导航到用户登录成功的主页反应+终极版+反应路由器,终极版
1)具有简单的用户名和密码
2)登录表单一旦用户提交登录表单用户应导航到家庭部件
为了做到这一点,我已经配置终极版与反应路由器-终极版
问题:
在发送一个正确的用户名和密码,服务器认证并发送正确的标记,但现在我成功地显示URL正确的路由,但分量不加载,
这里是我的文件
LoginForm的
import React, { Component } from 'react'
import { Button, Form, FormGroup, FormControl, ControlLabel, Checkbox, Col } from 'react-bootstrap';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { userAuthentication } from '../actions/userActions';
class LoginForm extends Component {
constructor(props) {
super(props)
this.state = {
email: '',
password: ''
}
this.onChange = this.onChange.bind(this);
this.onFormSubmit = this.onFormSubmit.bind(this);
}
onChange(e) {
this.setState({ [e.target.name]: e.target.value });
}
onFormSubmit(e) {
e.preventDefault();
this.props.userAuthentication(this.state)
}
render() {
//const { user, token } = this.props.userState;
const formInstance = (
<div>
{/*{token ? <p>{token}</p> : "null"}*/}
<Form horizontal onSubmit={this.onFormSubmit}>
<FormGroup controlId="formHorizontalEmail">
<Col componentClass={ControlLabel} sm={2}>
Email
</Col>
<Col sm={5}>
<FormControl type="email" name="email" onChange={this.onChange} value={this.state.email} placeholder="Email" />
</Col>
</FormGroup>
<FormGroup controlId="formHorizontalPassword">
<Col componentClass={ControlLabel} sm={2}>
Password
</Col>
<Col sm={5}>
<FormControl type="password" name="password" onChange={this.onChange} value={this.state.password} placeholder="Password" />
</Col>
</FormGroup>
<FormGroup>
<Col smOffset={2} sm={10}>
<Checkbox>Remember me</Checkbox>
</Col>
</FormGroup>
<FormGroup>
<Col smOffset={2} sm={10}>
<Button type="submit">
Sign in
</Button>
</Col>
</FormGroup>
</Form>
</div>
);
return (formInstance);
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({ userAuthentication: userAuthentication }, dispatch)
}
export default connect(null, mapDispatchToProps)(LoginForm);
行动
import { WS_URL } from '../utill/types';
import axios from 'axios';
import { push } from 'react-router-redux'
export function userAuthentication(userData){
return function (dispatch) {
dispatch({type: 'USER_LOGIN'});
axios.post(WS_URL+'/authenticate',
userData,
{headers:{
'Access-Control-Allow-Origin': '*'
}}
)
.then(function (response){
dispatch({type: 'USER_LOGIN_COMPLETED', payload: response.data})
dispatch(push('/home'))
//push('/home')
})
.catch(function (error){
dispatch({type: 'USER_LOGIN_REJECTECTED', payload: error})
});
}
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from "react-redux"
import createHistory from 'history/createBrowserHistory'
import { Route } from 'react-router'
import { ConnectedRouter } from 'react-router-redux'
//import Routes from './js/utill/routes'
import registerServiceWorker from './registerServiceWorker';
import './css/index.css';
import store from "./store"
import App from './js/components/App';
import Home from './js/components/Home';
import LoginPage from './js/containers/LoginPage';
const history = createHistory()
ReactDOM.render(<Provider store={store}>
<ConnectedRouter history={history}>
<div>
<Route exact path="/" component={App}/>
<Route path="/login" component={LoginPage}/>
<Route path="/home" component={Home}/>
</div>
</ConnectedRouter>
</Provider>
, document.getElementById('root'));
registerServiceWorker();
个
store.js
import { applyMiddleware, createStore } from 'redux'
import logger from 'redux-logger'
import { routerMiddleware,routerReducer } from 'react-router-redux';
import thunk from "redux-thunk"
import reducers from './js/reducers'
import createHistory from 'history/createBrowserHistory'
import { combineReducers } from 'redux'
const history = createHistory()
const combinedReducers = combineReducers({
...reducers,
router: routerReducer
})
const middleware = applyMiddleware(logger , thunk, routerMiddleware(history));
export default createStore(combinedReducers, middleware)
依赖列表
"axios": "^0.16.2",
"history": "^4.6.2",
"react": "^15.6.0",
"react-bootstrap": "^0.31.0",
"react-dom": "^15.6.0",
"react-facebook-login": "^3.6.1",
"react-google-login": "^2.9.2",
"react-redux": "^5.0.5",
"react-router-redux": "^5.0.0-alpha.6",
"redux": "^3.6.0",
"redux-logger": "^3.0.6",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.2.0"
有人能帮我为什么这个路由不工作,
我personnaly使用 '反应路由器' 库react/redux应用程序,它工作正常...
import { browserHistory } from 'react-router';
browserHistory.push('/home');
我忘了,你需要指定此时启动你的开发与webpack的开发服务器(如果你使用它):webpack-dev-server - -history-api-fallback“, –
但是目前我们没有配置webpack的权限,最新的反应配置? –
我不确定我是否有你的问题,但我只是想提一提,我需要调整我的webpack dev服务器配置为让它起作用 –
你有'react-router-redux'的正确版本吗?最新版本似乎是v4.1.1 [这里](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-reux) – stafamus
@stafamus是的,这似乎是最新的一个,当我安装它指向这一点,我有同样的问题,它似乎是 –