[英]Routing wit react-router from Store
i'm beginner with React and try to set up the routing with react-router. 我是React的初学者,并尝试使用react-router设置路由。
I have a 2.x version : 我有一个2.x版本:
"react-router": "^2.0.0"
This is my routes.js file : 这是我的route.js文件:
import React from 'react';
import {Router, Route, browserHistory} from 'react-router';
import App from './components/App';
import Home from './components/Home';
import Login from './components/Login';
export default (
<Router history={browserHistory}>
<Route component={App}>
<Route path="/" name="home" component={Home}/>
<Route path="/login" component={Login}/>
</Route>
</Router>
);
My main.js file look like this 我的main.js文件如下所示
import React from 'react';
import Router from 'react-router';
import ReactDOM from 'react-dom';
import { browserHistory } from 'react-router'
import routes from './routes';
ReactDOM.render(<Router history={browserHistory}>{routes}</Router>, document.getElementById('app'));
And basically what I want is from the component Login, I have a form, on submission, I use login() from LoginActions() which is something like that : 基本上我想要的是组件Login,我有一个表单,提交后,我使用LoginActions()的login(),就像这样:
login(username,password){
$.ajax({
type: 'POST',
url: '/login',
data:{username:username,password:password}
})
.done((data) => {
console.log("action login success");
this.actions.loginSuccess(data);
})
.fail((jqXhr) => {
this.actions.loginFail(jqXhr.responseJSON.message);
});
}
And at the end, I want onLoginSuccess to redirect from the component Login to the component Home (path : '/'). 最后,我希望onLoginSuccess从组件Login重定向到组件Home(路径:'/')。
On the paper it looks simple, but I've been looking at tutos and website for the past two day, and I have nothing :) 在纸上看起来很简单,但是过去两天我一直在浏览tutos和网站,但我什么都没有:)
Any help plz ? 有什么帮助吗? Also, feel free to guide me if you see anything not right on what I displayed.
另外,如果您发现我所显示的内容不正确,请随时引导我。
Thanks I 谢谢我
You may consider a library like https://github.com/reactjs/react-router-redux . 您可以考虑使用https://github.com/reactjs/react-router-redux之类的库。 You can import a push action creator that can be dispatched and programmatically change the route.
您可以导入可以分派的推送动作创建者,并以编程方式更改路线。 They give the example:
他们举了一个例子:
import { routerMiddleware, push } from 'react-router-redux'
// Apply the middleware to the store
const middleware = routerMiddleware(browserHistory)
const store = createStore( reducers, applyMiddleware(middleware) )
// Dispatch from anywhere like normal.
dispatch(push('/my-route'))
If not using redux you can just: 如果不使用redux,则可以:
import { browserHistory } from 'react-router'
browserHistory.push('/somewhere')
Edit: looking at it again, don't you have a nested Router component in main.js
? 编辑:再次查看它,您是否在
main.js
没有嵌套的Router组件?
It seems like you want to do something more like: 您似乎想做更多类似的事情:
import React from 'react';
import Router from 'react-router';
import ReactDOM from 'react-dom';
import { browserHistory } from 'react-router'
import Routes from './routes';
ReactDOM.render(<Routes />, document.getElementById('app'));
thanks for the feeback, but I'm a bit lost with this. 感谢您的费用返还,但是我对此有些迷失。
I added the react-router-redux and added the middleware to the store 我添加了react-router-redux并将中间件添加到商店
class LoginStore {
constructor() {
this.bindActions(LoginActions);
this.username = '';
this.password = '';
const middleware = routerMiddleware(browserHistory)
const store = createStore( reducers, applyMiddleware(middleware) )
}
I'm pretty sure the const store = .. has nothing to do there 我很确定const store = ..与那里无关
Below the constructor, I have the function 在构造函数下面,我有函数
onLoginSuccess(){
dispatch(push('/'))
console.log("success login in");
}
Thanks for your help I 谢谢你的帮助
Here is the LoginStore 这是LoginStore
import alt from '../alt';
import LoginActions from '../actions/LoginActions';
import { browserHistory } from 'react-router';
class LoginStore {
constructor() {
this.bindActions(LoginActions);
this.username = '';
this.password = '';
}
onUpdateUsername(event) {
this.username = event.target.value;
}
onUpdatePassword(event) {
this.password = event.target.value;
}
onLoginSuccess(data){
browserHistory.push('/');
console.log("success login in");
}
onLoginFail(data){
console.log("Login fail");
}
}
export default alt.createStore(LoginStore);
The line browserHistory.push('/') fires "vendor.bundle.js:161 Uncaught TypeError: Cannot read property 'push' of undefined" 该行browserHistory.push('/')触发“ vendor.bundle.js:161未捕获的TypeError:无法读取未定义的属性'push'”
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.