React项目中Routes和Redirect组件无法正常工作问题

你的代码存在几个react-router-dom版本适配和写法错误，是导致/menu路径下Menu组件无法正常渲染的核心原因：

• 导入了Routes组件但未使用：v6版本中所有Route规则不能直接放在普通DOM节点（比如你写的<div>）下，必须作为Routes组件的直接子元素，路由匹配逻辑才会正常执行。
• 路由属性写法错误：v6版本废弃了旧版的component属性，需要改用element属性传递渲染内容，属性值必须是JSX格式的组件标签，不能直接传组件函数/类引用。
• 根路径匹配规则冲突：根路径/默认采用前缀匹配，访问/menu这类以/开头的子路径时，根路径对应的Home组件也会被同时匹配渲染，导致页面结构异常。另外你导入的Redirect组件在v6版本已经被正式移除，需要实现重定向逻辑请替换为Navigate组件。

修正后可直接运行的代码 #

// 按需导入路由组件，v6版本重定向用Navigate替代旧版Redirect
import { Routes, Route, Navigate } from 'react-router-dom';
// 替换成你项目里实际的组件路径
import Home from './pages/Home';
import Menu from './pages/Menu';
import Contact from './pages/Contact';
import About from './pages/About';

const Body = () => {
  return (
    <div>
      <Routes>
        {/* 根路径加index属性，实现精确匹配，避免和子路径冲突 */}
        <Route index path="/" element={<Home />} />
        <Route path="/menu" element={<Menu />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/about" element={<About />} />
        {/* 可选：配置404兜底，所有未匹配路径重定向到首页 */}
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </div>
  );
};

export default Body;

前置检查项 #

如果替换代码后还是不生效，先确认两个基础配置：

• 整个React应用的最外层（一般是index.js入口文件里）已经用BrowserRouter或者HashRouter组件包裹，否则路由上下文不存在，所有路由规则都不会生效。
• 如果你用的是v5及更早版本的react-router-dom，需要把Routes换成Switch，根路径路由加exact属性，element换回component，就可以继续用Redirect组件。

内容的提问来源于stack exchange，提问作者MD ASHIKUR RAHMAN