如何解决 Matched leaf route at location "/project" does not have an element 错误？

Question

我正在学习反应路由，但是当我尝试使用 BrowserRouter 时，出现以下错误：

Matched leaf route at location "/project" does not have an element.
This means it will render an <Outlet /> with a null value by default
resulting in an "empty" page. 

  in Routes (created by Profile)
  in Profile (created by App)
  in App

PFA 下面的代码。

index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

APP.JS

import "./styles.css";
import Profile from "./Profile";
import { BrowserRouter } from "react-router-dom";
export default function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Profile />
      </BrowserRouter>
    </div>
  );
}

PROFILE.JS

import Home from "./Home";
import Projects from "./Projects";
import Blogs from "./Blogs";
import { Route, Routes, Switch } from "react-router-dom";
import { BrowserRouter, Link } from "react-router-dom";

const Profile = () => (
  <div>
    <Routes>
      <Route exact path="/" component={Home} />
      <Route path="/project" component={Projects} />
      <Route path="/blog" component={Blogs} />
    </Routes>
  </div>
);

export default Profile;

HOME.JS

const Home = () => {
  return <div>Hi im Home page</div>;
};

export default Home;

请注意 project.js 和 blog.js 类似于 home.js

Answer 1

您似乎在使用 react-router-dom@6。 Route 组件 API 与 v5 相比发生了显着变化。单个 element 道具取代了 component 和 render 以及 children 函数道具，后者采用 ReactNode、a.k.a。 JSX，值。

将 component 属性替换为 element 属性并将路由组件渲染为 JSX。

const Profile = () => (
  <div>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/project" element={<Projects />} />
      <Route path="/blog" element={<Blogs />} />
    </Routes>
  </div>
);

有关 v5 和 v6 之间的其他重大更改，请参阅 Upgrading from v5 迁移指南。

如何解决 Matched leaf route at location "/project" does not have an element 错误？

how to solve Matched leaf route at location "/project" does not have an element error?

reactjs

react-router

react-router-dom