title: Navigate to welcome page after login page using React Router Dom v6
body: <p>I'm a beginner learning React and using React v 17.0.2, react-router-dom v 6.0.2. I'm following a course made for react-router-dom v4. I'm not able to get page navigation working if I try to navigate from a successful login to append a welcome message to the url. In v4 this is achieved by a <code>{this.props.history.push(&quot;/welcome&quot;)</code> method. I'm not able to something equivalent in V6. Specifically, I would like to know how to handle the loginClicked method.</p>
  <p>Based on the helpful guidance from Himanshu Singh, I tried the following:</p>
  <pre><code>import { computeHeadingLevel } from '@testing-library/react'
  import React, { Component } from 'react'
  import { BrowserRouter as Router, Routes, Route, useNavigate } from 'react-router-dom'
  
  
  
  class TodoApp extends Component {
  
  
      render() {
          return (
              &lt;div className=&quot;TodoApp&quot;&gt;
                  &lt;Router&gt;
                      &lt;Routes&gt;
                          &lt;Route path=&quot;/&quot; exact element={&lt;LoginComponent /&gt;} /&gt;
                          &lt;Route path=&quot;/enlite&quot; element={&lt;LoginComponent /&gt;} /&gt;
                          &lt;Route path=&quot;/welcome&quot; element={&lt;WelcomeComponent /&gt;} /&gt;
                      &lt;/Routes&gt;
  
                  &lt;/Router&gt;
                  {/* &lt;LoginComponent /&gt; */}
  
              &lt;/div&gt;
          )
      }
  }
  
  class WelcomeComponent extends Component {
      render() {
          return &lt;div&gt;Welcome to Enlite&lt;/div&gt;
  
      }
  }
  
  class LoginComponent extends Component {
      constructor(props) {
          super(props)
          this.state = {
              username: 'testuser',
              password: '',
              hasLoginFailed: false,
              showSuccessMessage: false
          }
  
          this.handleChange = this.handleChange.bind(this)
          this.loginClicked = this.loginClicked.bind(this)
  }
  
  
      handleChange(event) {
          this.setState(
              {
                  [event.target.name]
                      : event.target.value
              })
      }
  
  
  **loginClicked() {
          
          if (this.state.username === 'testuser' &amp;&amp;
              this.state.password === 'dummy') {
                
              function HandlePageNav() {
                  let navigate = useNavigate()
                   navigate('/welcome')
              }
  
              **HandlePageNav();**
          }
          else {
              this.setState({ showSuccessMessage: false })
              this.setState({ hasLoginFailed: true })
          }
  
  }**
  
   render() {
          return (
              &lt;div&gt;
                  {this.state.hasLoginFailed &amp;&amp; &lt;div&gt;Invalid Credentials&lt;/div&gt;}
                  {this.state.showSuccessMessage &amp;&amp; &lt;div&gt;Welcome to Enlite&lt;/div&gt;}
                  User Name: &lt;input type=&quot;text&quot; name=&quot;username&quot; value={this.state.username} onChange={this.handleChange} /&gt;
                  Password: &lt;input type=&quot;password&quot; name=&quot;password&quot; value={this.state.password} onChange={this.handleChange} /&gt;
                  &lt;button onClick={this.loginClicked}&gt;Login&lt;/button&gt;
              &lt;/div&gt;
          )
  
      }
  
  
  }
  export default TodoApp
  </code></pre>
  <p>This gives the following error:</p>
  <blockquote>
  <p>Error: Invalid hook call. Hooks can only be called inside of the body
  of a function component. This could happen for one of the following
  reasons:</p>
  <ol>
  <li>You might have mismatching versions of React and the renderer (such as React DOM)</li>
  <li>You might be breaking the Rules of Hooks</li>
  <li>You might have more than one copy of React in the same app See <a href="https://reactjs.org/link/invalid-hook-call" rel="nofollow noreferrer">https://reactjs.org/link/invalid-hook-call</a> for tips about how to debug
  and fix this problem.</li>
  </ol>
  </blockquote>
  <p>Basically calling hooks in class components is not supported. I also tried to completely do away with the function like this:</p>
  <pre><code>  loginClicked() {
          
          if (this.state.username === 'testuser' &amp;&amp;
              this.state.password === 'dummy') {
  
                  let navigate = useNavigate()
                   navigate('/welcome')
    
          }
          else {
              this.setState({ showSuccessMessage: false })
              this.setState({ hasLoginFailed: true })
          }
  
  }
  </code></pre>
  <p>This gives a compile error:</p>
  <blockquote>
  <p>Line 85:32:  React Hook &quot;useNavigate&quot; cannot be called in a class
  component. React Hooks must be called in a React function component or
  a custom React Hook function  react-hooks/rules-of-hooks   Line 89:13:
  'HandlePageNav' is not defined<br />
  no-undef</p>
  </blockquote>
  <p>The above makes me wonder if I need to refactor my entire code into a function component or if there's a way to achieve this page navigation but keeping the class component. Other than that I would appreciate any help or insights on this problem. Thanks in advance.</p>