如何让嵌套在MemoryRouter内的react-router-dom Link组件控制顶层BrowserRouter？

这个场景确实挺常见的——当你用MemoryRouter隔离组件的路由状态，但又需要内部的跳转能穿透到顶层的BrowserRouter。下面有几个靠谱的方案：

方案1：手动获取顶层Router的导航上下文 #

React Router的所有Router组件（包括BrowserRouter和MemoryRouter）都是通过**上下文(Context)**来传递路由状态和导航方法的。你可以直接获取顶层BrowserRouter提供的上下文，而不是默认使用MemoryRouter的。

具体实现步骤：

1. 从react-router导入RouterContext（核心上下文在基础包中，而非react-router-dom）
2. 在Component内部使用useContext获取顶层上下文实例，解构出navigate方法
3. 自定义一个TopLevelLink组件，用这个顶层navigate处理点击事件，替代默认Link

示例代码：

import { useContext } from 'react';
import { RouterContext } from 'react-router';
import { Link as DefaultLink } from 'react-router-dom';

// 自定义顶层跳转的Link组件
const TopLevelLink = ({ to, ...props }) => {
  const { navigate } = useContext(RouterContext);
  
  const handleClick = (e) => {
    e.preventDefault();
    navigate(to);
  };

  return <DefaultLink to={to} onClick={handleClick} {...props} />;
};

// 在Component内部使用这个自定义组件
function Component() {
  return (
    <div>
      {/* 这个Link会触发顶层BrowserRouter的跳转 */}
      <TopLevelLink to="/app/other-section">跳转到应用其他部分</TopLevelLink>
      
      {/* 普通Link还是会走MemoryRouter的内部路由 */}
      <DefaultLink to="somerouter">内部路由跳转</DefaultLink>
    </div>
  );
}

方案2：通过props传递顶层导航方法 #

如果组件层级不深，直接把顶层的navigate方法通过props传给Component是更简单的方式：

1. 在BrowserRouter包裹的父组件中，用useNavigate获取顶层导航方法
2. 把这个方法作为props传递给Component
3. 在Component内部自定义点击逻辑，调用传入的navigate

示例代码：

// 父组件（在BrowserRouter内部）
import { useNavigate } from 'react-router-dom';

function ParentComponent() {
  const topLevelNavigate = useNavigate();
  
  return (
    <MemoryRouter>
      <Component topLevelNavigate={topLevelNavigate} />
    </MemoryRouter>
  );
}

// Component组件内部
import { Link as DefaultLink } from 'react-router-dom';

function Component({ topLevelNavigate }) {
  const handleTopLevelClick = (e, to) => {
    e.preventDefault();
    topLevelNavigate(to);
  };

  return (
    <div>
      <DefaultLink 
        to="/app/other-section" 
        onClick={(e) => handleTopLevelClick(e, "/app/other-section")}
      >
        跳转到应用其他部分
      </DefaultLink>
    </div>
  );
}

注意事项 #

• 确保使用React Router v6及以上版本，v5的API和上下文结构不同（v5中是通过history.push实现导航）
• 自定义Link时，记得保留默认Link的样式和active状态，直接复用DefaultLink元素即可，只替换点击逻辑

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