react-router-dom v6 not displaying pages-CodePudding

I have an app that successfully routes the url, but for some reason the pages aren't displaying under the header. I've looked at the other questions and available resources, but I'm very stuck in figuring out what I'm doing wrong. I am using react-router-dom 6.3.0

Here are my files for reference: 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>
);

App.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;

Home.js:

import React from "react";

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

export default Home;

All of the pages are just an tag with their title in black font. However, like I said, none of the pages are displaying even though the url is correctly routed. Any help would be much appreciated!

CodePudding user response：

Your code seems right! May be try adding a " / " before every routes.

Reply if you're seeing white screen in preview...

CodePudding user response：

You need an <Outlet /> element to render the routes. Based on your code, it looks like this should be in the return statement of Home.js:

import React from "react";

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

export default Home;

This will render the freshman, softmore, junior, senior components as subcomponents of Home, depending on which route is selected.

You can read the documentation for <Outlet /> here: https://reactrouter.com/docs/en/v6/components/outlet