react-router-dom v6 不显示页面

Question

我有一个应用程序可以成功路由 url，但由于某种原因，页面没有显示在 header 下。 我查看了其他问题和可用资源，但我非常坚持找出我做错了什么。 我正在使用 react-router-dom 6.3.0

这是我的参考文件：Index.js：

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { BrowserRouter as Router } from "react-router-dom";

import App from "./App";

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

应用程序.js：

import "./App.css";

import { Routes, Route } from "react-router-dom";

import Header from "./components/Header";

import Home from "./pages/Home";
import Freshman from "./pages/Freshman";
import Sophomore from "./pages/Sophomore";
import Junior from "./pages/Junior";
import Senior from "./pages/Senior";

function App() {
    return (
        <div className='app'>
            <Header />
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="freshman" element={<Freshman />} />
                <Route path="sophomore" element={<Sophomore />} />
                <Route path="junior" element={<Junior />} />
                <Route path="senior" element={<Senior />} />
            </Routes>
        </div>
    );
}

export default App;

Header.js：

import React from "react";

import { Link } from "react-router-dom";

import "./Header.css";

function Header() {
    return (
        <div className="header-container">
            <Link to="/" className="header-title">
                College
            </Link>
            <nav>
                <Link to="freshman" className="nav-item">
                    Freshman
                </Link>
                <Link  to="sophomore" className="nav-item">
                    Sophomore
                </Link>
                <Link to="junior" className="nav-item">
                    Junior
                </Link>
                <Link to="senior" className="nav-item">
                    Senior
                </Link>
            </nav>
        </div>
    );
}

export default Header;

主页.js：

import React from "react";

function Home() {
    return (
        <div>
            <h1>home</h1>
        </div>
    );
}

export default Home;

所有页面都只是一个标签，其标题为黑色字体。 但是，就像我说的那样，即使 url 路由正确，也没有显示任何页面。 任何帮助将非常感激！

Answer 1

您的代码似乎正确！ 可以尝试在每条路线之前添加一个“/” 。

如果您在预览中看到白屏，请回复...

Answer 2

您需要一个<Outlet />元素来呈现路线。 根据您的代码，看起来应该在 Home.js 的 return 语句中：

import React from "react";

function Home() {
    return (
        <div>
            <h1>home</h1>
            <Outlet />
        </div>
    );
}

export default Home;

这会将新生、softmore、初级、高级组件渲染为 Home 的子组件，具体取决于选择的路由。

您可以在此处阅读<Outlet />的文档： https://reactrouter.com/docs/en/v6/components/outlet