从商店路由机智反应路由器

Question

我是React的初学者，并尝试使用react-router设置路由。

我有一个2.x版本：

"react-router": "^2.0.0"

这是我的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>
    );

我的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'));

基本上我想要的是组件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);
            });
    }

最后，我希望onLoginSuccess从组件Login重定向到组件Home（路径：'/'）。

在纸上看起来很简单，但是过去两天我一直在浏览tutos和网站，但我什么都没有:)

有什么帮助吗？ 另外，如果您发现我所显示的内容不正确，请随时引导我。

谢谢我

Answer 1

您可以考虑使用https://github.com/reactjs/react-router-redux之类的库。 您可以导入可以分派的推送动作创建者，并以编程方式更改路线。 他们举了一个例子：

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'))

Answer 2

如果不使用redux，则可以：

import { browserHistory } from 'react-router'
browserHistory.push('/somewhere')

---

编辑：再次查看它，您是否在main.js没有嵌套的Router组件？

您似乎想做更多类似的事情：

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'));

Answer 3

感谢您的费用返还，但是我对此有些迷失。

我添加了react-router-redux并将中间件添加到商店

class LoginStore {
    constructor() {
        this.bindActions(LoginActions);
        this.username = '';
        this.password = '';
        const middleware = routerMiddleware(browserHistory)
        const store = createStore( reducers, applyMiddleware(middleware) )

    }

我很确定const store = ..与那里无关

在构造函数下面，我有函数

onLoginSuccess(){
        dispatch(push('/'))
        console.log("success login in");
    }

谢谢你的帮助

Answer 4

这是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);

该行browserHistory.push（'/'）触发“ vendor.bundle.js：161未捕获的TypeError：无法读取未定义的属性'push'”