【React】使用react登陆,跳转首页

序

在当今数字化的时代，人们越来越依赖网络和应用程序。对于这些应用程序，用户的登录是其中一个最基本和关键的功能。React是一种非常流行的JavaScript库，它可以帮助我们构建复杂的用户界面，并提供了丰富的工具和组件来管理应用程序的状态和行为。使用React模拟登录是一个不错的学习项目，特别适合那些想要深入了解React技术的开发人员和初学者。在这篇博客中，我们将为你提供以下内容：

1. React的基础知识：我们将介绍React的核心概念，包括组件、状态和生命周期方法等，以及如何使用这些概念构建一个简单的登录页面。
2. 使用React构建登录页面：我们将通过实际演示，向你展示如何使用React构建一个登录页面。我们将使用一些常用的React组件和工具，例如表单、按钮、路由等。
3. React最佳实践和技巧：我们将分享一些React的最佳实践和技巧，帮助你更好地应用React技术，并处理一些常见的问题。
   在学习使用React模拟登录的过程中，你将学会如何使用React构建一个完整的应用程序，同时深入了解React的核心概念和应用。无论你是新手还是有经验的开发人员，这篇博客都将为你提供有用的信息和见解，帮助你更好地了解React，并构建高效的应用程序。

• 2023/5/25 使用react-router-dom v6.x.x 版本路由跳转
  react-router-dom v6以上的版本需要使用 useNavigate 进行跳转,如下:

//1. 安装最新版本的react-router-dom
npm i react-router-dom@latest

// 2. 引入
import { useNavigate } from 'react-router-dom';

//3. 定义
const navigate = useNavigate();

//4. 跳转
 navigate('/home');

登录页代码如下 login.js

import React, { useState } from 'react';
import './LoginPage.css'; // 导入样式文件
import { Message } from '@arco-design/web-react';
import { useNavigate } from 'react-router-dom';

function Login(){
  const navigate = useNavigate();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleUsernameChange = (e) => {
    setUsername(e.target.value);
  };

  const handlePasswordChange = (e) => {
    setPassword(e.target.value);
  };

  const handleLogin = () => {

    if(username === 'admin' && password === '123456'){
      Message.success('登陆成功')
       // 跳转到首页
       navigate('/home');
    }
    // 处理登录逻辑
    console.log('登录');
  };
  return (
    <div className="login-page">
      <h2>登录</h2>
      <form>
        <div>
          <label htmlFor="username">用户名:</label>
          <input type="text" id="username" value={username} onChange={handleUsernameChange} />
        </div>
        <div>
          <label htmlFor="password">密码:</label>
          <input type="password" id="password" value={password} onChange={handlePasswordChange} />
        </div>
        <button type="button" onClick={handleLogin}>登录</button>
      </form>
    </div>
  )
}

export default Login;

值得注意的是 v6版本的很多API都做了修改，因此我将贴出我的App.js 供大家做参考

App.js

import './App.css'
import Login from './pages/Login/login'
import Home from './pages/home/index'

import { Routes, Route, Navigate } from 'react-router-dom'

function App() {
  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route path="/home" element={<Home />} />
      <Route path="/" element={<Navigate to="/login" />} />
    </Routes>
  )
}

export default App

react-router-dom 5.0和6.0的区别

整理了一些主要的区别供大家学习借鉴。

• 组件结构：在React Router v5.0中，使用或作为根组件来包裹路由组件。而在React Router v6.0中，根组件被替换为，不再需要包裹路由组件。

• 路由配置：在React Router v5.0中，使用组件来定义路由规则，并使用 组件来选择匹配的第一个路由。而在React Router v6.0中，路由规则被定义在组件内部，每个路由通过组件进行定义。此外，不再需要 组件。

• 动态路由：在React Router v5.0中，使用组件的path属性来定义静态路由，而使用组件的render或component属性来定义动态路由。在React Router v6.0中，静态和动态路由都使用path属性来定义，并且支持参数和嵌套路由的简化语法。

• 导航和重定向：在React Router v5.0中，使用组件来创建导航链接，并使用组件进行重定向。在React Router v6.0中，导航链接使用组件保持不变，但重定向使用组件来替代。

• 路由钩子：在React Router v5.0中，使用组件的render属性或useEffect钩子来处理路由变化时的副作用。而在React Router v6.0中，路由钩子被整合到useRoutes或useNavigate等自定义钩子中。

实测使用作为根组件会报错

Cannot read properties of undefined (reading 'pathname')