React路由跳转问题：登录后Redirect组件未生效如何解决？

嘿，我来帮你拆解下代码里的几个关键问题，这就是为什么你点击登录后看不到Welcome组件的原因：

1. useState 使用完全错误 #

你现在写的 let isLoggedIn = useState(false) 是不对的。useState 是React的Hook，它返回的是一个数组，第一个元素是当前状态值，第二个是用来更新状态的函数。正确的写法应该是：

const [isLoggedIn, setIsLoggedIn] = useState(false)

而且你在onFinish里直接给isLoggedIn赋值true/false，这种方式不会触发组件重新渲染——React完全不知道状态变了，自然不会处理后续的跳转逻辑。

2. Redirect 组件的使用方式不对 #

在onFinish回调里返回<Redirect>是无效的，因为这个回调不是组件的渲染函数。Redirect组件要么出现在组件的JSX输出里，要么你可以用history.push来手动跳转（需要借助useHistory Hook）。

3. Welcome.js 的写法不符合规范 #

你的Welcome.js直接用ReactDOM.render渲染内容，这是错误的——它应该是一个可导出的React组件，这样才能在路由里被引用。正确的Welcome.js应该写成：

import React from 'react';

function Welcome() {
  return <p>Welcome</p>;
}

export default Welcome;

4. 缺少路由的核心配置 #

你确实需要使用Route，而且必须用BrowserRouter（或其他Router类型）把整个应用包裹起来，才能让React Router的路由规则生效。

修正后的完整代码示例 #

App.js #

import React, { useState, useHistory } from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom'
import './App.css';
import { Form, Input, Button } from 'antd';
import Welcome from './Welcome'; // 导入Welcome组件

function App() {
  const bgstyle={
    background:"linear-gradient(to right, #11998e, #38ef7d)",
    height:"100vh",
    display: 'flex',
    justifyContent:'center',
    alignItems:'center',
    flexDirection: 'column'
  }
  const [isLoggedIn, setIsLoggedIn] = useState(false)
  const history = useHistory()

  const onFinish = (data) => {
    const loginSuccess = data.password === "password"
    setIsLoggedIn(loginSuccess)
    if(loginSuccess){
      console.log('Redirecting..')
      // 用history.push直接跳转
      history.push('/Welcome')
    }
  }

  return (
    <div style={bgstyle}>
      <h1 style={{color:'white'}}>Welcome</h1>
      <Form onFinish={onFinish}>
        <Form.Item name="username" rules={[{ required: true, message: 'Please enter your username!' }]}>
          <Input placeholder="Username"/>
        </Form.Item>
        <Form.Item name="password" rules={[{ required: true, message: 'Please enter your password!' }]}>
          <Input.Password placeholder="Password"/>
        </Form.Item>
        <Button type="primary" style={{width:200,borderColor:'gray',background:'gray'}} htmlType="submit">Login</Button>
      </Form>
    </div>
  );
}

// 用Router包裹整个应用，并配置路由规则
function RootApp() {
  return (
    <Router>
      <Route exact path="/" component={App} />
      <Route path="/Welcome" component={Welcome} />
    </Router>
  )
}

export default RootApp;

Welcome.js #

import React from 'react';

function Welcome() {
  return <p>Welcome</p>;
}

export default Welcome;

你遗漏的核心内容总结 #

• 正确使用React的useState Hook管理状态，更新状态必须用对应的setter函数
• React Router的完整配置：需要Router包裹应用，用Route定义路径与组件的映射
• 组件的正确写法：每个页面组件应该导出，而不是直接调用ReactDOM.render
• 跳转的正确方式：要么在组件JSX里根据状态渲染Redirect，要么用useHistory的push方法

入门学习建议 #

• 先吃透React核心Hook的用法，尤其是useState、useEffect，这是函数组件的基础
• 学习React Router的基础路由配置、跳转逻辑，理解Router、Route这些核心组件的作用
• 熟悉Ant Design表单的基本使用流程，搞清楚onFinish回调的触发逻辑

内容的提问来源于stack exchange，提问作者CuteBoy