Routing programmatically in react with redux

Question

Below code snippet from index.js works fine to me when I want to route from static links on the page-

import React from 'react';
import ReactDOM from 'react-dom';
import LoginForm from './components/LoginForm/LoginForm';
import { Provider } from 'react-redux';
import store from './redux/store';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Home from './components/Home.js'

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <div>
        <h2>My Page</h2>
        <ul>
          <li><Link to={'/'}>LoginForm</Link></li>
          <li><Link to={'/home'}>Home</Link></li>
        </ul>
        <hr />

        <Switch>
          <Route exact path='/' component={LoginForm} />
          <Route exact path='/home' component={Home} />
        </Switch>
      </div>
    </Router>
  </Provider>,
  document.getElementById('root')

Is there away to route into another page inside the code, like ?

 updateStore(loggedIn){
    const action = {type:loggedIn};
    store.dispatch(action);
    if(loggedIn==='LOGGED_IN'){
       console.log("I am In");
      //route me into another page ??
    }else{
      console.log("I am out");
    }
  }

Similar to something Link to in <li><Link to={'/'}>LoginForm</Link></li>. I want to route in my callback method after successful login. — Shubham
– Shubham, Commented Jul 20, 2018 at 11:28

Shubham · Accepted Answer · 2018-07-24 06:51:52Z

Got my answer here

Created my own route.js

import React from 'react';
import { Route, Switch } from 'react-router';
import LoginForm from './components/LoginForm/LoginForm';
import Home from './components/Home';

class RouteList extends React.Component {
    render() {
        return (
            <Switch>
                <Route exact path="/" component={LoginForm} />
                <Route path='/home' exact={true} component={Home}></Route>
            </Switch>

        );
    }
}

export default RouteList;

Then in index.js -

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './redux/store';
import RouteList from './route';
import { Router } from 'react-router'
import createBrowserHistory from 'history/createBrowserHistory'
export const history = createBrowserHistory()

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <RouteList></RouteList>
    </Router>
  </Provider>,
  document.getElementById('root')
);

And finally in my action.js -

import { history } from '../index';

callLoginApi(email, password, error => {
  dispatch(setLoginPending(false));
  if (!error) {
    dispatch(setLoginSuccess(true));
    history.push('/home');
  } else {
    dispatch(setLoginError(error));
  }
});

Manoz · Accepted Answer · 2018-07-20 11:34:44Z

1

You can use react-router for that

npm i react-router --save

in your component do the followings

import {browserHistory} from 'react-router';

 callback = () => {
   browserHistory.push('/home');
 }

answered Jul 20, 2018 at 11:34

Manoz

6,62713 gold badges72 silver badges117 bronze badges

2 Comments

Shubham Over a year ago

this is not working :( .. I am using "import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';" in index.js. May be react-router-dom is different from react-router

Manoz Over a year ago

have a look at this answer regarding you question stackoverflow.com/questions/42684809/…

Collectives™ on Stack Overflow

Routing programmatically in react with redux

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related