React项目中Screen2页面的Bootstrap Card无法渲染问题

核心问题原因 #

控制台报错的直接原因是React Router v6废弃了component属性定义路由组件，你在App.js中给Screen2路由使用了component={Screen2}（这是React Router v5的写法），v6要求必须通过element属性传入JSX元素，否则路由无法匹配到要渲染的组件，导致页面空白。

分步修复方案 #

1. 修正App.js的路由配置

将Screen2的路由配置从component改为element，同时确保正确导入Screen2组件：

import Screen2 from './Screen2'; // 确认导入路径与你的文件结构一致

export default function App() {
  return (
    <Router>
      <div className="App">
        <Nav />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/Screen1" element={<Screen1 />} /> {/* v6中默认精确匹配，无需exact属性 */}
          <Route path="/Screen2/:text" element={<Screen2 />} /> {/* 关键修复：用element替代component */}
        </Routes>
      </div>
    </Router>
  )
}

2. 优化Screen1的提交逻辑（可选但必要）

当前Screen1中，提交按钮被<Link>包裹，点击会直接触发路由跳转，表单的onSubmit事件大概率不会执行（Link导航优先级更高），导致空值校验、清空输入框的逻辑失效。改用useNavigate钩子处理导航：

import React, { useState } from 'react'
import { useNavigate, Link } from 'react-router-dom'

export default function Screen1() {
  const [text, setText] = useState('')
  const [errorMsg, setErrorMsg] = useState('')
  const navigate = useNavigate()

  const handleTextChange = (e) => {
    setText(e.target.value)
    setErrorMsg('') // 输入时自动清空错误提示
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    const trimmedText = text.trim()
    if (trimmedText === '') {
      setErrorMsg('Please enter some text.')
      return
    }
    navigate(`/Screen2/${trimmedText}`) // 通过useNavigate跳转
    setText('')
  }

  return (
    <div className="info">
      <h2>Screen 1</h2>
      <form onSubmit={handleSubmit}>
        <label>
          Enter text:
          <input
            type="text"
            value={text}
            onChange={handleTextChange}
          />
        </label>
        <button type="submit">Submit</button> {/* 移除外层的Link标签 */}
        {errorMsg && <p className="error">{errorMsg}</p>}
      </form>
      <Link to="/">Go back to home</Link>
    </div>
  )
}

3. 给Screen2增加边界处理（可选）

如果用户直接访问/Screen2/（无参数），text.split('')会报错，增加空值判断避免崩溃：

import React from 'react'
import { useParams } from 'react-router-dom'
import Card from 'react-bootstrap/Card'

function Screen2() {
  const { text } = useParams()
  const letters = text ? text.split('') : [] // 空值判断

  return (
    <div className="info">
      <h2>Screen 2</h2>
      {letters.length > 0 ? (
        <Card style={{ width: '18rem' }}>
          <Card.Body>
            {letters.map((letter, index) => (
              <Card.Text key={index}>{letter}</Card.Text>
            ))}
          </Card.Body>
        </Card>
      ) : (
        <p>No text received</p>
      )}
    </div>
  )
}

export default Screen2

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