React Router v6导航切换空白求助（No routes matched location）

问题核心是导航链接路径与路由配置不匹配：

• 你在App.js中定义的路由是根路径下的绝对路径（如/calender、/locations）
• 但Navbar.jsx里的NavLink用了文件系统的相对路径（如../pages/home），这不符合React Router的路由规则，导致跳转后找不到对应路由。

修复步骤 #

修改Navbar.jsx中NavLink的to属性，替换为和路由配置一致的绝对路径：

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="/">Home</NavLink>
          <NavLink to="/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>
  );
}

export default Navbar;

补充说明 #

React Router的to属性对应你在Routes/Route中定义的path值，并非项目中的文件路径。确保所有导航链接的to与路由配置的path拼写、大小写完全一致，就能正常匹配路由并渲染对应页面。

内容的提问来源于stack exchange，提问作者Primo Centurio