从商店路由反应路由器

我是初学者与反应，并尝试设置路由反应路由器。从商店路由反应路由器

我有一个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

从商店路由反应路由器

回答

相关问题