React任务管理应用路由异常：添加任务组件显示位置错误

问题说明 #

开发React任务管理应用时，点击「Create Task」按钮后，添加任务组件并未全屏替换首页内容，而是显示在App组件原有内容的下方。

问题根源 #

当前App.js中，首页的头部、任务展示区和操作按钮直接渲染在Router标签下，不属于任何路由规则的element。这导致无论路由切换到哪个路径，这部分内容都会始终保留在页面中，路由匹配的组件只会追加在其下方展示。

修改步骤 #

1. 重构App.js的路由结构 #

将首页的UI内容封装为独立组件（如Home），并将其设置为根路由/的渲染元素，确保路由切换时会完整替换页面内容。

修改后的App.js代码：

import "./App.css";
import TaskDisplay from "./TaskDisplay/taskDisplay";
import TaskCreate from "./TaskCreate/TaskCreate";
import { useState } from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  NavLink,
} from "react-router-dom";

// 封装首页组件
function Home({ tasks }) {
  return (
    <div className="container">
      <header>
        <p className="title">Task Manager</p>
      </header>
      <div className="task-shower">
        <div className="show-tasks">
          {tasks.length === 0 && (
            <p className="none-message">There are no tasks here! 😉</p>
          )}
          {tasks.length > 0 && <TaskDisplay />}
        </div>
        <div className="options">
          <NavLink to="/Create-Task">Create Task</NavLink>
          <button>Delete Task</button>
        </div>
      </div>
    </div>
  );
}

function App() {
  const [tasks, setTasks] = useState([]);
  
  return (
    <Router>
      <Routes>
        {/* 根路由渲染首页组件 */}
        <Route path="/" element={<Home tasks={tasks} />} />
        {/* 创建任务路由渲染对应组件 */}
        <Route path="/Create-Task" element={<TaskCreate />} />
      </Routes>
    </Router>
  );
}

export default App;

2. 可选：优化TaskCreate组件全屏样式 #

若要让添加任务页视觉上完全占满屏幕，可调整TaskCreate.module.css中的taskcontainer样式：

.taskcontainer {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 保留原有其他样式 */
}

修改说明 #

• 将首页UI封装为Home组件后，根路由切换时会完整替换页面内容，解决了组件追加显示的问题。
• 原Router下的固定内容被移入路由规则内部，确保路由切换时页面整体更新。
• 样式调整可让添加任务页更贴合全屏展示的需求。

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