如何在独立组件中移除多路由，仅保留单路由并动态修改path

首先明确：React Router的Route是声明式配置，直接修改它的path属性并非常规用法，更合理的方式是通过状态管理当前要渲染的组件，同时保持URL与页面内容同步。以下是具体实现步骤：

1. 抽离路由配置数组 #

把所有路由规则整理成数组，方便后续匹配和管理：

import { matchPath, Routes, Route, useLocation } from 'react-router-dom';
import { useState, useEffect } from 'react';

// 抽离所有路由配置
const routesConfig = [
  { path: '/', element: <Main code={code} /> },
  { path: '/search', element: <TheSearchTrack code={code} /> },
  { path: '/likes', element: <Likes code={code} /> },
  { path: '/artist', element: <Artist code={code} /> },
  { path: '/genre/:id', element: <GenreTemplate code={code} /> },
  { path: '/artist/:id', element: <ArtistPages code={code} /> },
  { path: '/genretrack/:id', element: <GenreTrack code={code} /> },
  { path: '/track/:id', element: <Track code={code} /> },
];

2. 改造Home组件 #

通过状态同步当前路由路径，匹配对应组件后用单个Route渲染：

const Home = ({ code }) => {
  const location = useLocation();
  // 用状态存储当前活跃的路由路径，初始值取当前URL路径
  const [activePath, setActivePath] = useState(location.pathname);

  // 当URL变化时自动同步状态
  useEffect(() => {
    setActivePath(location.pathname);
  }, [location]);

  // 根据当前路径匹配对应组件（支持带参数的路由）
  const currentElement = routesConfig.find(route => {
    return matchPath({ path: route.path }, activePath) !== null;
  })?.element;

  return (
    <div className="wrapper__flex_main">
      {/* 原TheNav组件如果用Link，无需修改——导航后location变化会自动同步状态 */}
      <TheNav {...code} />
      <Routes>
        {/* 单个Route匹配所有路径，渲染当前匹配到的组件 */}
        <Route path="*" element={currentElement} />
      </Routes>
    </div>
  );
};

export default Home;

关键说明 #

• 直接修改Route的path不符合React Router的声明式设计理念，会导致频繁重渲染，用状态匹配组件的方式更稳定。
• 带参数的路由（如/genre/:id）通过matchPath方法匹配，确保能正确找到对应组件。
• 若TheNav用的是原生Link组件，无需额外修改，导航后location变化会自动触发状态同步和组件匹配。

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