React Router v6运行报错[Home]不是<Route>组件问题求助

问题原因 #

你遇到的报错是React Router v6的语法规则不匹配导致的，有两处错误：

• 第一处：<Routes> 组件的直接子元素只能是 <Route> 或 <React.Fragment>，你的代码里在两个Route之后额外写了<Home />，违反了这个规则，这也是报错直接提示的问题。
• 第二处：React Router v6 已经废弃了Route组件的component属性和exact属性，改用element属性传入组件的JSX形式，且默认就是精确匹配路径。

修正后的App.js代码 #

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Footer from "./components/Footer/Footer";
import Header from "./components/Header/Header";
import Home from "./Pages/Home/Home";
import Quiz from "./Pages/Quiz/Quiz";
import "./App.css";
function App() {
  return (
    <BrowserRouter>
      <div className="App" style={{ backgroundImage: "url(./circle.jpg)" }}>
        <Header />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/quiz" element={<Quiz />} />
        </Routes>
      </div>
      <Footer />
    </BrowserRouter>
  );
}

export default App;

你的Home.js里的跳转逻辑没有问题，只要Quiz组件正常做默认导出，修改完App.js之后点击Start Quiz按钮就能正常跳转到/quiz路径。

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