React Router报错：[Navigate]不是<Route>组件，请求技术帮助

错误原因 #

• React Router v6 强制要求<Routes>的直接子元素只能是<Route>或<React.Fragment>，不能直接放置<Navigate>组件
• v6版本的<Route>语法已更新：不再支持component属性和exact属性，需改用element传入JSX组件，且默认就是精确匹配规则

修正步骤 #

1. 把<Navigate>包裹在一个用path="*"（匹配所有未定义路由）的<Route>中，作为兜底路由
2. 将所有<Route>的component属性替换为element，并传入对应的JSX元素（比如element={<Home />}）
3. 移除exact属性，v6中<Route path="/">默认就是精确匹配

修正后的完整代码 #

import React from 'react';
import { Navigate, Route, Routes } from 'react-router-dom';
import './App.css';
import Blog from './pages/Blog';
import Home from './pages/Home';

const App = () => (
  <div className='container'>
    <Routes>
      <Route path='/' element={<Home />} />
      <Route path='/blog/:id' element={<Blog />} />
      {/* 兜底路由：匹配所有未定义的路径，跳转到首页 */}
      <Route path="*" element={<Navigate to="/" replace={true} />} />
    </Routes>
  </div>
);

export default App;

额外说明 #

• path="*"可以捕获所有未配置的路由，实现全局兜底跳转逻辑
• replace={true}会替换当前的历史记录条目，避免用户点击返回按钮时回到不存在的路由页面

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