Using useHistory on React

Question

I am a beginner in React and trying to learn things by myself. I have this code that I'd like to navigate to the Login page using useHistory but I can't seem to make it work. Hope you can help me. Here is my code below:

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

const App = () => {
    let history = useHistory();
    
    const MoveToLogin = () => {
        history.push('./container/Login');
    }

    return (
        <div>
            <button className='btn' text='User Login' onClick=. 
            {MoveToLogin}>Login</button>
        </div>
    );
}

export default App;

score 0 · Answer 1 · answered Jun 29 '21 at 09:12

First you need to add Provider 'Router' which is imported from 'react-router-dom'
Define routes and corresponding components in routing file.
You can only use history inside the children of Provider Router.
Navigate to route using history.push('/login'). Don't provide relative path of component file here. Use the route you want to show in browser url

score 0 · Answer 2 · answered Jun 29 '21 at 10:31

I have played around and did more research about useHistory. I was able to make it work. It has navigated to a new component. Please find my solution below. Hope it can help others with the same kind of issue.

import UserLogin from "./pages/UserLogin";

const ButtonLogin = () => {
  let history = useHistory();
  const MoveToLogin = () => {
    history.push('/pages/UserLogin');
  }
  return (
    <div><button className='btn btn-primary' onClick={MoveToLogin}>Login</button></div>
  );
}
const App = () => {
  return (
    <div>
      <Router>
        <Route path="/pages/UserLogin" exact component={UserLogin} />
        <Route path="/" exact component={ButtonLogin} />
      </Router>
    </div>
  );
}

export default App;

Refer to this answer as well for further information. Cannot read property 'push' of undefined for react use history

dee · Answer 3 · 2021-06-29T12:16:04.413

I hope you have the routes defined for the path specified

      <Router>
        <Route path="/container/Login" exact component={LoginComponent} />
      </Router>

The dot is not needed in your move to login function.

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

const App = () => {
    let history = useHistory();
    
    const MoveToLogin = () => {
        history.push('/container/Login'); // Here you don't need dot ./container
    }

    return (
        <div>
            <button className='btn' text='User Login' onClick=. 
            {MoveToLogin}>Login</button>
        </div>
    );
}

export default App;

Using useHistory on React

3 Answers3