React项目中Router外使用NavLink报错及页面动画需求问题

错误原因 #

你遇到的问题有两个核心原因：

1. Navbar 里的 NavLink 依赖 React Router 提供的路由上下文，但你把 Navbar 放在了 RouterProvider 外部，导致 useLocation() 等钩子无法获取路由上下文，直接报错。
2. AnimatePresence 直接包裹 RouterProvider 的写法无法正确监听路由切换，没法触发页面动画，同时还会导致路由上下文异常。

修复步骤及代码调整 #

要实现「导航栏不随路由动画/重渲染 + 页面切换有动画」的需求，我们可以通过**路由布局（Layout Route）**来组织组件层级，同时正确配置 AnimatePresence：

1. 修改 App.tsx

调整路由结构，用根路由承载 Navbar 和动画容器，子路由对应页面内容：

import React from "react";
import { createBrowserRouter, RouterProvider, Route, Outlet, useLocation } from "react-router-dom";
import Navbar from "./components/Navbar";
import { AnimatePresence } from "framer-motion";

import Home from "./pages/Home/Home.tsx";
import About from "./pages/About/About.tsx";

// 定义根布局组件，包含Navbar和动画容器
const RootLayout = () => {
  const location = useLocation();
  return (
    <>
      <Navbar />
      {/* AnimatePresence包裹Outlet，监听location变化触发动画 */}
      <AnimatePresence mode="wait">
        <Outlet key={location.pathname} />
      </AnimatePresence>
    </>
  );
};

const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    // 子路由对应各个页面
    children: [
      {
        path: "/",
        element: <Home />,
      },
      {
        path: "/about",
        element: <About />
      }
    ]
  }
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

2. 修正 Navbar.tsx 的链接错误

你代码里的 About 链接 to="/" 写错了，改成 to="/about" 才能正确跳转：

import React from "react";
import styled from "@emotion/styled";
import { NavLink } from "react-router-dom";

export default function Navbar(props: React.AllHTMLAttributes<HTMLElement>) {
  return (
    <NavbarDiv>
      <NavLink to="/" className={({ isActive }) => isActive ? "active" : ""}>
        Home
      </NavLink>
      {/* 修正这里的to路径 */}
      <NavLink to="/about" className={({ isActive }) => isActive ? "active" : ""}>
        About
      </NavLink>
    </NavbarDiv>
  )
}

const NavbarDiv = styled.div`
  width: 100%;
  height: 85px;
  background-color: #242424;
  color: var(--background-color);
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.25);
`;

关键说明 #

• RootLayout 的作用：把 Navbar 放在路由上下文内部，解决 useLocation() 的报错；同时 Navbar 作为根布局的一部分，只会渲染一次，不会随页面切换重渲染或参与动画。
• AnimatePresence + Outlet：通过 useLocation() 获取当前路由路径，作为 Outlet 的 key，路由切换时 AnimatePresence 会识别到组件变化，触发进入/退出动画。
• 修正链接路径：确保导航链接能正确跳转到对应页面，避免无效跳转。

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