0

I'm constructing a web app with a Sign in page as the default page displayed. When a user successfully signs in, I want to route the user to another functional component dashboard().

My app.js looks like this

function App() {
  return (
    <ThemeProvider theme={THEME}>
      <FirebaseContext.Consumer>
        {firebase => <SignIn firebase={firebase}/>}
      </FirebaseContext.Consumer>
    </ThemeProvider>
  );
}

export default App;

SignIn is the component that contains the login form, and the action to authenticate the user.

export default function SignIn(props) {
   function signInUser(){
      \\Signs in a user, and redirects to Dashboard() component
   }
   return(...)
}

How can I redirect the user from inside the signInUser function, to another component dashboard()?

Randomuser123
  • 61
  • 6
  • dose this answer your quetion [link] (https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router) – Ahmed Khattab Feb 23 '20 at 18:48

1 Answers1

0

From the docs, you can use useHistory hook.

import { useHistory } from "react-router-dom";

let history = useHistory();
export default function SignIn(props) {
     function signInUser(){
        // logic here
        history.push("/dashboard") // which is your route to the Dashboard com
     }
     return(...)
}
asmaa
  • 715
  • 5
  • 15
  • How do I setup the router? How do I set up the routes? useHistory doesn’t work until I setup some other logic – Randomuser123 Feb 23 '20 at 19:31
  • history.push() takes the route to your component. You can use `react-router-dom` to setup routes, Take a look here https://reacttraining.com/react-router/web/example/basic – asmaa Feb 23 '20 at 19:44