從商店路由機智反應路由器

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