React Router中location与navigator属性配置问题（TypeScript环境）

一、Router组件的location和navigator配置步骤 #

1. 安装依赖 #

首先安装history包，它是react-router-dom依赖的路由历史管理工具：

npm install history
# 或使用yarn
yarn add history

2. 修改index.tsx代码 #

创建自定义的浏览器历史实例，然后给Router组件传入对应的location和navigator属性：

import { Router } from "react-router-dom";
import { createBrowserHistory } from "history";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

// 创建浏览器历史实例
const history = createBrowserHistory();

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

root.render(
  <React.StrictMode>
    <Router location={history.location} navigator={history}>
      <App />
    </Router>
  </React.StrictMode>
);

reportWebVitals();

二、解决framer-motion的Animate Presence退出不生效问题 #

除Router配置外，还需完成以下设置：

• 用AnimatePresence包裹Routes组件，并设置mode="wait"（等待退出动画完成后再切换路由）
• 给Routes组件添加唯一key（推荐用location.pathname）
• 确保动画组件配置了exit属性

修改后的App.tsx示例：

import { Routes, Route, useLocation } from "react-router-dom";
import { AnimatePresence } from "framer-motion";
import Navbar from "./Navbar";
import Home from "./Home";
import SingleShooting from "./SingleShooting";

function App() {
  const location = useLocation();

  return (
    <>
      <Navbar />
      <AnimatePresence mode="wait">
        <Routes location={location} key={location.pathname}>
          <Route path="/" element={<Home />} />
          <Route path="Portfolio/:portfolioId" element={<SingleShooting />} />
          {/* 其他路由 */}
        </Routes>
      </AnimatePresence>
    </>
  );
}

export default App;

关键说明 #

• Router是react-router-dom的底层路由组件，需手动传入路由历史的location和navigator；BrowserRouter是封装好的高级组件，内部已处理这些属性，但如需自定义路由历史（如配合framer-motion动画），则需用Router+自定义history实例。
• AnimatePresence必须感知路由变化，因此要传入location属性，并给Routes设置唯一key，这样路由切换时才能触发退出动画。

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