如何解決“/project”位置的匹配葉路由沒有元素錯誤？

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>
  );
}

簡介.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;

主頁.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以及ReactNode children又名 JSX）值。

將component prop 替換為element prop 並將路由組件呈現為 JSX。

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

有關 v5 和 v6 之間的其他重大更改，請參閱從 v5 遷移指南升級。