前言
createMemoryRouter 是 React Router 提供的一種特殊路由器，它將路由狀態存儲在內存中而不是瀏覽器的 URL 地址欄中。
這種路由方式特別適用于測試、非瀏覽器環境（如 React Native）以及需要完全控制路由歷史的場景。
一、createMemoryRouter 的主要用途
- 測試環境：在單元測試和集成測試中模擬路由行為
- 非瀏覽器環境：在
React Native、Electron或Node.js服務器端渲染中使用 - 組件沙盒：在
Storybook或類似工具中獨立運行路由組件 - 路由歷史控制：需要編程式控制完整路由歷史的場景
- 無 URL 環境：在不需要地址欄顯示路由變化的應用中使用
二、createMemoryRouter 與 createBrowserRouter 的關鍵區別
三、createMemoryRouter 完整代碼示例
3.1、 基礎路由配置
// src/MemoryRouterDemo.jsx
import React from 'react';
import {createMemoryRouter,RouterProvider,Link,Outlet,useLocation
} from 'react-router-dom';// 頁面組件
function Home() {return (<div className="page"><h1>首頁</h1><p>歡迎使用內存路由示例</p><div className="page-nav"><Link to="/about" className="nav-link">關于我們</Link><Link to="/products" className="nav-link">產品列表</Link></div></div>);
}function About() {return (<div className="page"><h1>關于我們</h1><p>我們是一家專注于前端技術的公司</p><Link to="/" className="back-link">返回首頁</Link></div>);
}// 布局組件
function RootLayout() {const location = useLocation();return (<div className="app"><header className="app-header"><h1 className="logo">內存路由示例</h1><div className="url-display">當前路由: <code>{location.pathname || '/'}</code></div><nav className="main-nav"><Link to="/" className="nav-item">首頁</Link><Link to="/about" className="nav-item">關于</Link><Link to="/products" className="nav-item">產品</Link></nav></header><main className="app-content"><Outlet /> {/* 子路由渲染位置 */}</main><footer className="app-footer"><p>當前使用: <code>createMemoryRouter</code> | 路由歷史: {location.key}</p></footer></div>);
}// 創建內存路由配置
const router = createMemoryRouter([{path: "/",element: <RootLayout />,children: [{index: true,element: <Home />},{path: "about",element: <About />},{path: "products",element: <ProductsList />}]}
], {initialEntries: ["/"], // 初始路由initialIndex: 0 // 初始路由索引
});// 產品列表組件
function ProductsList() {const products = [{ id: 1, name: 'React 教程', price: 99 },{ id: 2, name: 'Node.js 實戰', price: 129 },{ id: 3, name: 'TypeScript 指南', price: 89 }];return (<div className="page"><h1>產品列表</h1><div className="products-grid">{products.map(product => (<div key={product.id} className="product-card"><h3>{product.name}</h3><p>價格: ￥{product.price}</p></div>))}</div><Link to="/" className="back-link">返回首頁</Link></div>);
}// 導出使用內存路由的應用
export default function MemoryRouterDemo() {return <RouterProvider router={router} />;
}
3.2、 在 Storybook 中使用 createMemoryRouter
// src/stories/UserProfile.stories.jsx
import React from 'react';
import { createMemoryRouter
)
)
