React Router v6.14报错：<Route>仅能作为<Routes>子节点求助

问题根源 #

1. react-router-dom v6 强制要求所有<Route>必须作为<Routes>的直接子元素，不能单独放在<Router>下
2. v6 废弃了<Switch>，改用<Routes>；同时<Route>不再支持component属性，改用element属性
3. 你的代码直接渲染了所有页面组件，没有通过路由规则控制显示，还导入了v5的过时API（Switch、useHistory）

具体修改步骤 #

1. 修改index.js #

把<Route>放到<Routes>内部，同时替换component为element属性：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Router>
      <Routes>
        <Route path="/*" element={<App />} />
      </Routes>
    </Router>
  </React.StrictMode>
);

path="/*"是为了让App组件能处理内部的子路由规则。

2. 修改App.js #

• 删除无用的Switch、useHistory导入，替换为Routes和Route
• 将页面组件通过<Route>配置到<Routes>中，保留Header、Nav、Footer作为全局共用组件：

import Header from './Header';
import Nav from './Nav';
import Home from './Home';
import NewPost from './NewPost';
import PostPage from './PostPage';
import About from './About';
import Missing from './Missing';
import Footer from './Footer';
import { Routes, Route } from 'react-router-dom'
import { useState, useEffect } from 'react';

function App() {
  return (
    <div className="App">
      <Header />
      <Nav />
      {/* 路由规则配置 */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/newpost" element={<NewPost />} />
        <Route path="/post/:id" element={<PostPage />} /> {/* 适配PostPage的id参数需求 */}
        <Route path="/about" element={<About />} />
        <Route path="*" element={<Missing />} /> {/* 匹配所有未定义路由，显示404页面 */}
      </Routes>
      <Footer />
    </div>
  );
}

export default App;

额外提示 #

• 若原本需要useHistory的跳转功能，v6需替换为useNavigate，导入方式为import { useNavigate } from 'react-router-dom'，用法示例：const navigate = useNavigate(); navigate('/newpost')
• 确保Nav组件中使用v6的<Link>组件（import { Link } from 'react-router-dom'）实现页面跳转，不要用原生a标签

内容的提问来源于stack exchange，提问作者Kiki-ko