I have a button with a click event that calls a function that makes an API to login a user, once a user has been successfully logged in. I want to redirect the user to /overview. I'm not entirely sure how to do it with react-router-dom, everything I have seen has been with react-router and using a Class Based Component and not a Function Based Component like I am using.

Below is how my Routes are setup

import React from "react";
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Login from "../../login/Login";
import Main from "../../main/Main";

const App = () => {

   return (
      <div className="App">
         <Router>
            <div className="App-container">
               <Route path={"/login"} ponent={() => <Login />} />
               <Route exact path={"/overview"} ponent={Main} />
            </div>
         </Router>
      </div>
   );

}

export default App;

Here is my LoginCard Component (Inside Login Component) with the button and function with the api call

import React from 'react';
import { BrowserRouter as Router, Route, Redirect, Link } from 'react-router-dom';
import Button from '../button/Button';
import LoginService from '../../api/LoginService';

const LoginCard = (props) => {

   const loginService = new LoginService();

   const handleLogin = () => {
      loginService.login(email, password)
         .then((response) => {
            // Want to redirect here?
         });
   }

   return (
      <div className="Login">
         <Button onClick={handleLogin}>Login</Button>
      </div>
   );
};

export default LoginCard;

Here is what I have tried but hasn't worked from looking at other threads

<Redirect to="/overview"/> <Redirect to={{ pathname: '/overview' }} />

I also saw people mention props.location or this.props.location both are undefined for me.

Tried to add

import createBrowserHistory from "history/createBrowserHistory";
const history = createBrowserHistory();
<Router history={history}>

in App.js and the use history.push But got an error saying it was not a function.

So not really sure how to do this? I'd rather only solve this with react-router-dom or via a Function Based Component. Any help would be greatly appreciated.

I have a button with a click event that calls a function that makes an API to login a user, once a user has been successfully logged in. I want to redirect the user to /overview. I'm not entirely sure how to do it with react-router-dom, everything I have seen has been with react-router and using a Class Based Component and not a Function Based Component like I am using.

Below is how my Routes are setup

import React from "react";
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Login from "../../login/Login";
import Main from "../../main/Main";

const App = () => {

   return (
      <div className="App">
         <Router>
            <div className="App-container">
               <Route path={"/login"} ponent={() => <Login />} />
               <Route exact path={"/overview"} ponent={Main} />
            </div>
         </Router>
      </div>
   );

}

export default App;

Here is my LoginCard Component (Inside Login Component) with the button and function with the api call

import React from 'react';
import { BrowserRouter as Router, Route, Redirect, Link } from 'react-router-dom';
import Button from '../button/Button';
import LoginService from '../../api/LoginService';

const LoginCard = (props) => {

   const loginService = new LoginService();

   const handleLogin = () => {
      loginService.login(email, password)
         .then((response) => {
            // Want to redirect here?
         });
   }

   return (
      <div className="Login">
         <Button onClick={handleLogin}>Login</Button>
      </div>
   );
};

export default LoginCard;

Here is what I have tried but hasn't worked from looking at other threads

<Redirect to="/overview"/> <Redirect to={{ pathname: '/overview' }} />

I also saw people mention props.location or this.props.location both are undefined for me.

Tried to add

import createBrowserHistory from "history/createBrowserHistory";
const history = createBrowserHistory();
<Router history={history}>

in App.js and the use history.push But got an error saying it was not a function.

So not really sure how to do this? I'd rather only solve this with react-router-dom or via a Function Based Component. Any help would be greatly appreciated.

• javascript
• reactjs
• react-router-dom

3 Answers 3

Since LoginCard is a child ponent of Login it will not get access to the route props automatically. You can either change your Route to the following, and pass down the history prop from Login to LoginCard:

<Route path="/login" ponent={Login} />

Or you can use the withRouter HOC to inject the route props into the LoginCard ponent.

const LoginCard = props => {
  const loginService = new LoginService();

  const handleLogin = () => {
    loginService.login(email, password).then(response => {
      props.history.push("/overview");
    });
  };

  return (
    <div className="Login">
      <Button onClick={handleLogin}>Login</Button>
    </div>
  );
};

export default withRouter(LoginCard);

You can return it conditionally in your render method like

if(this.state.authenticated){
 return <Redirect to={{ pathname: '/overview' }} />
}

and return your login ui if not authenticated as you have

 return (
  <div className="Login">
  <Button onClick={handleLogin}>Login</Button>
  </div>
);

If you want that to login user please Also look into privateRoute which help you secure your page

Please look this tutorial for more details react auth tutorial click here