React路由：替换Switch为Routes后页面无法渲染的问题求助

核心问题分析 #

1. 组件命名冲突：你自定义的路由组件命名为Routes，和react-router-dom导出的<Routes>组件重名，导致导入和使用时出现冲突。
2. React Router v6语法错误：v6版本彻底替换了旧版的Switch和Route用法，同时你之前在App.js里用<Route>包裹整个布局的写法完全错误，这是导致页面无内容的主要原因。
3. 旧版属性未更新：v6不再支持component属性，也不需要exact（Routes默认精确匹配）。

修正后的代码 #

1. 修正App.js结构

去掉外层多余的<Route>，直接在<BrowserRouter>下放置布局组件：

import { BrowserRouter } from 'react-router-dom';
import Header from './Header';
import AppRoutes from './AppRoutes'; // 导入改名后的路由组件
import Footer from './Footer';

function App() {
  return (
    <BrowserRouter>
      <Header />
      <AppRoutes />
      <Footer />
    </BrowserRouter>
  );
}

export default App;

2. 重命名并修改路由组件（改为AppRoutes.js）

使用v6的<Routes>和<Route>语法，替换component为element：

import { Routes, Route } from 'react-router-dom';
import Catalog from './Catalog';
import Detail from './Detail';
import Home from './Home';

const AppRoutes = () => {
  return (
    <Routes>
      <Route path="/:category/search/:keyword" element={<Catalog />} />
      <Route path="/:category/:id" element={<Detail />} />
      <Route path="/:category" element={<Catalog />} />
      <Route path="/" element={<Home />} />
    </Routes>
  );
};

export default AppRoutes;

关键说明 #

• 命名冲突解决：自定义路由组件必须改名（比如AppRoutes），避免和React Router的内置Routes组件混淆。
• v6路由语法：Route的element属性必须传入JSX元素（如<Home />），而非组件引用（Home）。
• 布局结构简化：不需要用<Route>包裹整个页面布局，<BrowserRouter>直接作为根容器即可，之前的写法会导致路由无法正确匹配，进而渲染空内容。
• 精确匹配无需手动设置：v6的<Routes>会自动按路径优先级匹配最精确的路由，因此根路径不需要exact属性。

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