React中如何路由到TypeScript(.tsx)类组件？

你遇到的核心问题是：Login只是普通TypeScript类，并非React组件，而React路由的element属性要求接收React元素（即符合React组件规范的实例），所以直接用<Login/>或{Login}都无法正常渲染。

下面提供两种针对性解决方案：

方案一：将普通类改造为React类组件 #

如果Login类需要承担UI渲染职责，让它继承React.Component并实现render方法，使其成为标准的React类组件：

// Login.tsx
import React, { Component } from 'react';

export class Login extends Component {
  // 可保留原有业务逻辑，比如状态管理、自定义方法
  state = {
    username: '',
    password: ''
  };

  handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    this.setState({ [name]: value } as Pick<typeof this.state, keyof typeof this.state>);
  };

  // 必须实现render方法返回JSX结构
  render() {
    return (
      <div className="login-wrapper">
        <input
          type="text"
          name="username"
          value={this.state.username}
          onChange={this.handleInputChange}
          placeholder="用户名"
        />
        <input
          type="password"
          name="password"
          value={this.state.password}
          onChange={this.handleInputChange}
          placeholder="密码"
        />
        <button>登录</button>
      </div>
    );
  }
}

改造后，在App.tsx中就能正常使用<Login/>作为路由元素：

// App.tsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Login } from './Login';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Login />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

方案二：将普通类作为逻辑工具，搭配独立UI组件 #

如果Login类仅用于封装登录逻辑（比如API请求、数据验证），不需要负责UI渲染，那么创建一个单独的React UI组件，在组件内部实例化并调用Login类的方法：

1. 保留原Login类的逻辑：

// Login.tsx
export class Login {
  async performLogin(username: string, password: string): Promise<boolean> {
    // 示例登录逻辑：调用后端API
    const res = await fetch('/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, password })
    });
    return res.ok;
  }
}

2. 创建独立的UI组件（比如LoginPage.tsx）：

// LoginPage.tsx
import React, { useState } from 'react';
import { Login } from './Login';

export const LoginPage = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const loginService = new Login();

  const handleLogin = async () => {
    const isSuccess = await loginService.performLogin(username, password);
    if (isSuccess) {
      // 登录成功后的逻辑，比如跳转首页
    }
  };

  return (
    <div className="login-wrapper">
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="用户名"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="密码"
      />
      <button onClick={handleLogin}>登录</button>
    </div>
  );
};

3. 在App.tsx路由中使用这个UI组件：

// App.tsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { LoginPage } from './LoginPage';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<LoginPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

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