使用React Router v6的空白页面没有匹配位置的路由

Question

您好，我在“react-router-dom”方面遇到了一些问题，如果有人可以帮助我，那就太好了。

以下是代码：

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;

它适用于主页，但如果我想通过使用导航栏切换到另一个页面，它会显示一个空页面。

有人可以帮助我吗？

我检查了拼写错误和路径

Answer 1

导航栏中的链接是错误的，您应该提供路由路径之一，而不是您的反应组件。

<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>