Route won't render component in React-CodePudding

I am trying to make a simple navigation bar using React that will navigate through pages.

I am using Router, and you can see that the links change the page, but without rendering the component. I used this import :

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

Wrapped my navigation inside a tag, included the links to the Routes, and then used the tag to wrap all the Routes.

<Routes>
          <Route path="/" element={<Home />} />
          <Route path="/profile" element={<Profile />} />
          <Route path="/classes" element={<Classes />} />
        </Routes>

The whole code :

import "./App.css";
import Pdf from "./components/Pdf.js";
import data from "./data.js";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Home from "./Pages/Home.js";
import Profile from "./Pages/Profile.js";
import Classes from "./Pages/Classes.js";

function App() {
  return (
    <div className="App">
      <Router>
        <nav >
          <div >
            <a href="#" >
              App
            </a>
            <button
              
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#navbarNav"
              aria-controls="navbarNav"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              Menu
            </button>
            <div
              
              id="navbarNav"
            >
              <ul >
                <li >
                  <Link  to="/">Αρχική</Link>
                </li>
                <li >
                  <Link  to="/profile">Προφίλ</Link>
                </li>
                <li >
                  <Link  to="/classes">Classes</Link>
                </li>
              </ul>
            </div>
          </div>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/profile" element={<Profile />} />
          <Route path="/classes" element={<Classes />} />
        </Routes>
      </Router>
      
    </div>
  );
}

export default App;

Is it overlapping anywhere?

This is my index.js code :

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><App /></React.StrictMode>
);

reportWebVitals();

CodePudding user response：

Try to add a property exact to the routes components, like:

<Route path="/" exact element={<Home />} />
<Route path="/profile" element={<Profile />} />
<Route path="/classes" element={<Classes />} />

This happen because when you provide only the path property, the application will render the first component that have at least a part of the route instead of the component that matches the whole route.

See more: https://v5.reactrouter.com/web/api/NavLink/exact-bool