React.js中Route组件内元素无法加载问题求助

关于新版本是否必须用Routes包裹Route #

• 没错，react-router-dom v6及以后的版本必须用<Routes>组件包裹所有<Route>，它替代了旧版的<Switch>组件，负责管理路由匹配逻辑，确保只有第一个匹配的路由被渲染。

组件不加载的问题原因及修复 #

你的问题出在<Route>的element属性写法上：v6版本中，element需要直接传入JSX元素，而不是返回JSX的箭头函数。你当前写的element={() => (...)}会导致React无法正确识别并渲染内部组件，只要去掉箭头函数，直接传递JSX即可。

修改后的核心代码片段 #

<Routes>
  {/* 直接传递JSX元素，去掉外层的箭头函数 */}
  <Route path='/' element={
    <>
      <AddTask addTask_atr={handleTaskAddition}/>
      <Tasks_comp task_rmv_click={handleRemoveClick} tasks_atr={tasks_var} task_arg_click={handleTaskClick}/>
    </>
  } />
</Routes>

完整修改后的App.js代码 #

import React, { useState } from 'react';
import {v4 as uuidv4}      from "uuid";
import {BrowserRouter as Router, Route, Routes} from "react-router-dom"

import "./App.css";

import Tasks_comp from "./components/Tasks";
import AddTask    from './components/AddTask';
import Header     from './components/Header';

const App = () => {
  const [tasks_var, setTasks] = useState([
    {
      id: "1",
      title: "study",
      completed: false,
    },
    {
      id: "2",
      title: "read",
      completed: true,
    }
  ]);

  const handleTaskClick = (taskId) => {
    const newTasks = tasks_var.map((cada_task) =>{
      if (cada_task.id === taskId){
        return {...cada_task, completed: ! cada_task.completed}
      }
      else{
        return cada_task;
      };
    });
    setTasks(newTasks);
  }

  const handleRemoveClick = (taskId) => {
    const newTasks = tasks_var.filter(function(obj) {
      return obj.id !== taskId
    })
    //também possível fazer com método splice. pesquisar
    setTasks(newTasks);
  }

  const handleTaskAddition = (taskTitle) => {
    const newTasks = [...tasks_var, {  //dica abaixo
      title: taskTitle,
      id: uuidv4(), //valor aleatório
      completed: false,
    }]; // equivalente ao push

    setTasks(newTasks);
  }

  return (
    <Router>
      <div id='my_div' className="container">
        <Header/>
        <Routes>
          <Route path='/' element={
            <>
              <AddTask addTask_atr={handleTaskAddition}/>
              <Tasks_comp task_rmv_click={handleRemoveClick} tasks_atr={tasks_var} task_arg_click={handleTaskClick}/>
            </>
          } />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者João Pedro Oliveira