Reactjs 如何正确重构路由器组件？

我正在React中创建一个待办事项列表应用程序。使用React路由器，它有“/全部”、“今天”、“每周”、“收件箱”和自定义“/：projectId”任务的路由。它们都呈现相同的组件

，该组件接受两个道具：

• 要将任务添加到的项目ID
• 项目名称，以及
• 属于各自项目的任务

我不知道如何正确地重构这样的代码，使其尽可能地高效和枯燥。以下是我目前的尝试：

import { useSelector } from "react-redux";
import { useParams } from "react-router-dom";

import {
  selectAllTasks,
  selectTodayTasks,
  selectWeekTasks,
  selectProjectTasks
} from "../../redux/tasks.module";

import { selectCurrentProject } from "../../redux/projects.module";

import TaskList from "../task-list/task-list.component";

const projectId = 0; // Tasks entered will be added to Inbox

export const AllTasks = () => {
  const tasks = useSelector(selectAllTasks);

  return <TaskList projectName="All" projectId={projectId} tasks={tasks} />;
};

export const TodayTasks = () => {
  const tasks = useSelector(selectTodayTasks);

  return <TaskList projectName="Today" projectId={projectId} tasks={tasks} />;
};

export const WeekTasks = () => {
  const tasks = useSelector(selectWeekTasks);

  return (
    <TaskList projectName="Next 7 Days" projectId={projectId} tasks={tasks} />
  );
};

export const ProjectTasks = () => {
  const { projectId } = useParams();
  const { text } = useSelector(state => selectCurrentProject(state, projectId));
  const tasks = useSelector(state => selectProjectTasks(state, projectId));

  return <TaskList projectName={text} projectId={projectId} tasks={tasks} />;
};

从“react redux”导入{useSelector}；
从“react router dom”导入{useParams}；
进口{
选择所有任务，
选择今天的任务，
选择周任务，
选择项目任务
}来自“../../redux/tasks.module”；
从“./../redux/projects.module”导入{selectCurrentProject}”；
从“./task list/task list.component”导入任务列表；
常量projectId=0；//输入的任务将添加到收件箱中
导出常量AllTasks=（）=>{
常量任务=使用选择器（选择所有任务）；
返回；
};
导出const TodayTasks=（）=>{
const tasks=使用选择器（选择Today tasks）；
返回；
};
导出常量周任务=（）=>{
常量任务=使用选择器（选择Weektasks）；
返回(
);
};
导出常量项目任务=（）=>{
常量{projectId}=useParams（）；
const{text}=useSelector（state=>selectCurrentProject（state，projectId））；
const tasks=useSelector（state=>selectProjectTasks（state，projectd））；
返回；
};

下面的页面称之为：

import { Switch, Route, useRouteMatch } from "react-router-dom";

import Header from "../../components/header/header.component";
import Sidebar from "../../components/sidebar/sidebar.component";
import {
  AllTasks,
  TodayTasks,
  WeekTasks,
  ProjectTasks
} from "../../components/filters/filters.component";

import useStyles from "./tasks.styles";

const TasksPage = () => {
  const { path } = useRouteMatch();
  const classes = useStyles();

  return (
    <div className={classes.container}>
      <Header />
      <Sidebar />
      <Switch>
        <Route exact path={`${path}/all`} component={AllTasks} />
        <Route exact path={`${path}/today`} component={TodayTasks} />
        <Route exact path={`${path}/week`} component={WeekTasks} />
        <Route exact path={`${path}/:projectId`} component={ProjectTasks} />
      </Switch>
    </div>
  );
};

export default TasksPage;

从“react router dom”导入{Switch，Route，useRouteMatch}；
从“../../components/Header/Header.component”导入标题；
从“../../components/Sidebar/Sidebar.component”导入侧栏；
进口{
所有任务，
今天的任务，
周任务，
项目任务
}来自“../../components/filters/filters.component”；
从“/tasks.styles”导入useStyles；
const TasksPage=（）=>{
const{path}=useRouteMatch（）；
const classes=useStyles（）；
返回(
);
};
导出默认任务集；

最有效的方法是什么？并且不仅允许硬编码的路由（即所有、今天、星期等），还允许自定义用户项目路由（/：projectId）共存，并且不允许重复代码？ 非常感谢你