從商店路由反應路由器

我是初學者與反應，並嘗試設置路由反應路由器。從商店路由反應路由器

我有一個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從組件登錄重定向到組件主頁（路徑：「/」）。

在這看似簡單的文件，但我一直在尋找TUTOS和網站在過去兩年的日子，我沒有什麼:)

任何幫助PLZ？另外，如果您發現任何不正確的內容，請隨時引導我。

感謝我

來源

2016-07-26 ilellouch

如果不使用終極版你可以：

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

編輯：它再次尋找，不要你有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(<Routes />, document.getElementById('app'));

來源

2016-07-26 06:14:06

謝謝，但我一直在嘗試這一點，並得到browserhistory是undefined。 – ilellouch

我有」未捕獲TypeError：無法讀取屬性'推'的未定義「我在哪裏在類中的函數中調用browserHistory.push（'/'）LoginStore – ilellouch

如果成功導入browserHistory，則無法定義browserHistory。是否確定某個地方沒有輸入錯別字？ –

你可以考慮像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'))

來源

2016-07-26 05:45:31 walkerrandophsmith

感謝您的留言反饋，但我有點這個丟失。

我加入了反應路由器，終極版，並加入中間件商店

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

    }

我敢肯定的常量店= ..無關那裏

下面的構造，我具備的功能

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

感謝您的幫助我

來源

2016-07-26 06:33:09 ilellouch

這裏是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 Uncaught TypeError：無法讀取屬性'推'未定義「

來源

2016-07-26 11:39:34 ilellouch

從商店路由反應路由器

回答

相關問題