blank page by using react router v6 No routes matched location

Question

Hi there i have some problems with "react-router-dom" and it would be great if someone could help me.

Here are the codes:

index.js

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


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

app.js

import React from 'react';
import { Routes, Route } from "react-router-dom"
import HomePage from './pages/home';
import CalenderPage from './pages/calender';
import LocationsPage from './pages/locations';
import LoginPage from './pages/login';
import ContactPage from './pages/contact';


function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<HomePage/>}/>
        <Route path="/calender" element={<CalenderPage/>}/>
        <Route path="/locations" element={<LocationsPage/>}/>
        <Route path="/login" element={<LoginPage/>}/>
        <Route path="/contact" element={<ContactPage/>}/>
      </Routes>
    </div>
  );
}

export default App;

navbar.jsx

import React from 'react';
import { NavLink } from "react-router-dom"
import { useRef } from 'react';
import { FaBars, FaTimes } from "react-icons/fa";
import "../styles/navbar.css";

function Navbar() {
  const navRef = useRef();

  const showNavbar = () => {
    navRef.current.classList.toggle("responsive")
  }
  
  return (
    <header>
        <h3>Logo</h3>
        <nav ref={navRef}>
          <NavLink to="../pages/home">Home</NavLink>
          <NavLink to="../pages/calender">Kalender</NavLink>
          <NavLink to="../pages/locations">Locations</NavLink>
          <NavLink to="../pages/contact">Kontakt</NavLink>
          <NavLink to="../pages/login">Login</NavLink>
          <button className='nav-btn nav-close-btn' onClick={showNavbar}>
            <FaTimes/>
          </button>
        </nav>
        <button className='nav-btn' onClick={showNavbar}>
            <FaBars/>
        </button>
    </header>
  );
}

export default Navbar;

it wokrs for th main page, but if i want to switch to anothr page by using the navbar it shows me an empty page.

could someone help me?

i checked the typo and the paths

Answer 1

your links in the navbar are wrong, you should provide one of the route paths, not your react components.

<header>
        <h3>Logo</h3>
        <nav ref={navRef}>
          <NavLink to="/">Home</NavLink>
          <NavLink to="/pages/calender">Kalender</NavLink>
          <NavLink to="/locations">Locations</NavLink>
          <NavLink to="/contact">Kontakt</NavLink>
          <NavLink to="/login">Login</NavLink>
          <button className='nav-btn nav-close-btn' onClick={showNavbar}>
            <FaTimes/>
          </button>
        </nav>
        <button className='nav-btn' onClick={showNavbar}>
            <FaBars/>
        </button>
</header>