Routing wit react-router from Store

Question

i'm beginner with React and try to set up the routing with react-router.

I have a 2.x version :

"react-router": "^2.0.0"

This is my routes.js file :

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

My main.js file look like this

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

And basically what I want is from the component Login, I have a form, on submission, I use login() from LoginActions() which is something like that :

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

And at the end, I want onLoginSuccess to redirect from the component Login to the component Home (path : '/').

On the paper it looks simple, but I've been looking at tutos and website for the past two day, and I have nothing :)

Any help plz ? Also, feel free to guide me if you see anything not right on what I displayed.

Thanks I

Answer 1

You may consider a library like https://github.com/reactjs/react-router-redux . You can import a push action creator that can be dispatched and programmatically change the route. They give the example:

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

If not using redux you can just:

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

---

Edit: looking at it again, don't you have a nested Router component in main.js ?

It seems like you want to do something more like:

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

thanks for the feeback, but I'm a bit lost with this.

I added the react-router-redux and added the middleware to the store

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

    }

I'm pretty sure the const store = .. has nothing to do there

Below the constructor, I have the function

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

Thanks for your help I

Answer 4

Here is the 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);

The line browserHistory.push('/') fires "vendor.bundle.js:161 Uncaught TypeError: Cannot read property 'push' of undefined"