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

Question

我是学习 React 并使用 React v 17.0.2、react-router-dom v 6.0.2 的初学者。 我正在学习为 react-router-dom v4 制作的课程。 如果我尝试从成功登录导航到 append 向 url 发送欢迎消息，我无法使页面导航正常工作。 在 v4 中，这是通过{this.props.history.push("/welcome")方法实现的。 我无法在 V6 中实现同等功能。 具体来说，我想知道如何处理 loginClicked 方法。

根据 Himanshu Singh 的有用指导，我尝试了以下方法：

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

这给出了以下错误：

错误：无效的挂钩调用。 钩子只能在 function 组件的主体内部调用。 这可能由于以下原因之一而发生：

1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
2. 您可能违反了 Hooks 规则
3. 您可能在同一个应用程序中拥有多个 React 副本，请参阅https://reactjs.org/link/invalid-hook-call以获取有关如何调试和修复此问题的提示。

基本上不支持在 class 组件中调用钩子。 我还尝试像这样完全取消 function：

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

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

}

这给出了一个编译错误：

第 85:32 行：无法在 class 组件中调用 React Hook “useNavigate”。 必须在 React function 组件或自定义 React Hook function react-hooks/rules-of-hooks Line 89:13: 'HandlePageNav' 中调用 React Hooks
无非定义

以上让我想知道是否需要将整个代码重构为 function 组件，或者是否有办法实现此页面导航但保留 class 组件。 除此之外，我将不胜感激有关此问题的任何帮助或见解。 提前致谢。

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 })
        }

}

或者更简单的方法是，您不需要创建这个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 })
        }

}