使用 React Router Dom v6 登录页面后导航到欢迎页面

Question

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 {this.props.history.push("/welcome") method. I'm not able to something equivalent in V6. Specifically, I would like to know how to handle the loginClicked method.

Based on the helpful guidance from Himanshu Singh, I tried the following:

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 (
            <div className="TodoApp">
                <Router>
                    <Routes>
                        <Route path="/" exact element={<LoginComponent />} />
                        <Route path="/enlite" element={<LoginComponent />} />
                        <Route path="/welcome" element={<WelcomeComponent />} />
                    </Routes>

                </Router>
                {/* <LoginComponent /> */}

            </div>
        )
    }
}

class WelcomeComponent extends Component {
    render() {
        return <div>Welcome to Enlite</div>

    }
}

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' &&
            this.state.password === 'dummy') {
              
            function HandlePageNav() {
                let navigate = useNavigate()
                 navigate('/welcome')
            }

            **HandlePageNav();**
        }
        else {
            this.setState({ showSuccessMessage: false })
            this.setState({ hasLoginFailed: true })
        }

}**

 render() {
        return (
            <div>
                {this.state.hasLoginFailed && <div>Invalid Credentials</div>}
                {this.state.showSuccessMessage && <div>Welcome to Enlite</div>}
                User Name: <input type="text" name="username" value={this.state.username} onChange={this.handleChange} />
                Password: <input type="password" name="password" value={this.state.password} onChange={this.handleChange} />
                <button onClick={this.loginClicked}>Login</button>
            </div>
        )

    }


}
export default TodoApp

This gives the following error:

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:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Basically calling hooks in class components is not supported. I also tried to completely do away with the function like this:

  loginClicked() {
        
        if (this.state.username === 'testuser' &&
            this.state.password === 'dummy') {

                let navigate = useNavigate()
                 navigate('/welcome')
  
        }
        else {
            this.setState({ showSuccessMessage: false })
            this.setState({ hasLoginFailed: true })
        }

}

This gives a compile error:

Line 85:32: React Hook "useNavigate" 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
no-undef

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.

Answer 1

loginClicked() {
        
        if (this.state.username === 'testuser' &&
            this.state.password === 'dummy') {
              
            /*You are not calling this function*/
            function HandlePageNav() {
                let navigate = useNavigate()
                 navigate('/welcome')
            }
            HandlePageNav(); /*Calling this function*/
        }
        else {
            this.setState({ showSuccessMessage: false })
            this.setState({ hasLoginFailed: true })
        }

}

Or a much simpler way is, you don't need to create this HandlePageNav function

loginClicked() {
        
        if (this.state.username === 'testuser' &&
            this.state.password === 'dummy') {
              
            /*keep it here, whenever login condition passes, it will automatically navigate*/
                let navigate = useNavigate()
                 navigate('/welcome')
        }
        else {
            this.setState({ showSuccessMessage: false })
            this.setState({ hasLoginFailed: true })
        }

}