使用 Store 中的 react-router 进行路由答案

【问题标题】：Routing wit react-router from Store使用 Store 中的 react-router 进行路由
【发布时间】：2016-07-26 05:34:01
【问题描述】：

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

我有一个 2.x 版本：

"react-router": "^2.0.0"

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

基本上我想要的是来自组件登录，我有一个表单，在提交时，我使用来自 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和网站，我什么都没有:)

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

谢谢我

【问题讨论】：

标签： javascript node.js reactjs react-router

【解决方案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'))

【讨论】：

【解决方案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'));

【讨论】：

谢谢，但我一直在尝试这个并且浏览器历史未定义。
我在 LoginStore 类的函数中调用 browserHistory.push('/') 时出现“未捕获的类型错误：无法读取未定义的属性 'push'”
browserHistory 如果导入成功，则不能未定义。你确定你没有在某个地方打错字吗？
看起来不错。您是否能够从堆栈跟踪中判断它是 your browserHistory 引用是 null 还是 react-router 内部的东西？

【解决方案3】：

感谢您的反馈，但我对此有点迷茫。

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

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");
    }

感谢您的帮助我

【讨论】：

【解决方案4】：

这里是登录商店

    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 Uncaught TypeError: Cannot read property 'push' of undefined”

【讨论】：