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

what do you mean by `Linking programmatically` ? – Manoz Jul 20 '18 at 11:25 — Manoz, Jul 20 '18 at 11:25
you want to redirect to `/` after login? – Manoz Jul 20 '18 at 11:31 — Manoz, Jul 20 '18 at 11:31
i want to redirect to /home after I login – Shubham Jul 20 '18 at 11:33 — Shubham, Jul 20 '18 at 11:33

score 2 · Accepted Answer · answered Jul 24 '18 at 06:51

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

score 1 · Answer 2 · answered Jul 20 '18 at 11:34

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 '18 at 11:34

Manoz

6,507
13
68
114

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 – Shubham Jul 20 '18 at 11:43
have a look at this answer regarding you question https://stackoverflow.com/questions/42684809/react-router-vs-react-router-dom-when-to-use-one-or-the-other – Manoz Jul 20 '18 at 12:04

Routing programmatically in react with redux

2 Answers2