首次使用react-router报错：[App]不是<Route>组件问题咨询

错误核心原因：<Routes>组件的直接子元素必须是<Route>或<React.Fragment>，你的index.js中在<BrowserRouter>的<Routes>里直接放置了<App />，而App组件本身返回的也是<Routes>，这违反了React Router的规则。

修复方案一：修改index.js（推荐） #

移除index.js中的<Routes>，直接在<BrowserRouter>下渲染<App />——因为App内部已经包含了完整的路由配置：

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "bootstrap/dist/css/bootstrap.css";
import "font-awesome/css/font-awesome.css";
import "hover.css";
import "./App.css";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

reportWebVitals();

修复方案二：调整App.jsx与index.js结构 #

将App组件改为基础容器，把路由配置移到index.js中：

修改后的App.jsx #

import React, { Component } from "react";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div className="App">
        {this.props.children}
      </div>
    );
  }
}

export default App;

修改后的index.js #

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "bootstrap/dist/css/bootstrap.css";
import "font-awesome/css/font-awesome.css";
import "hover.css";
import "./App.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Customer from "./components/customer";
import Movies from "./components/moviesComponent";
import NotFound from "./components/not-found";
import Rentals from "./components/rentals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/movies" element={<App><Movies /></App>}></Route>
      <Route path="/rentals" element={<App><Rentals /></App>}></Route>
      <Route path="/customers" element={<App><Customer /></App>}></Route>
      <Route path="/not-found" element={<App><NotFound /></App>}></Route>
    </Routes>
  </BrowserRouter>
);

reportWebVitals();

额外优化建议 #

可以在路由配置中补充根路由跳转和404兜底逻辑，比如在App.jsx的<Routes>中添加：

<Route path="/" element={<Navigate to="/movies" />}></Route>
<Route path="*" element={<Navigate to="/not-found" />}></Route>

记得先导入Navigate组件：import { Route, Routes, Navigate } from "react-router-dom";

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