如何在独立npm包组件中使用react-router-dom的Link与钩子，避免多BrowserRouter？

核心思路很简单：你的NPM包不需要自己套BrowserRouter，直接复用宿主项目已有的Router上下文就行，具体这么做：

1. 配置Peer Dependencies #

把react-router-dom设为peer依赖，而不是常规的dependencies或devDependencies。这样宿主项目会负责提供兼容版本的React Router，既避免重复安装，也不会出现多个Router实例冲突的情况。

在你的包的package.json里加这段：

{
  "peerDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-router-dom": "^6.0.0"
  }
}

版本号可以根据你的组件支持范围调整，比如要兼容v5就写^5.0.0 || ^6.0.0。

2. 直接用React Router的API写组件 #

现在导航组件里可以直接导入Link、useLocation这些，不用再手动传参数，宿主项目的Router上下文会自动覆盖过来。

举个导航组件的例子：

import { Link, useLocation } from 'react-router-dom';

export const Navbar = () => {
  const location = useLocation();

  return (
    <nav className="navbar">
      <Link 
        to="/" 
        className={location.pathname === '/' ? 'navbar-link active' : 'navbar-link'}
      >
        首页
      </Link>
      <Link 
        to="/products" 
        className={location.pathname.startsWith('/products') ? 'navbar-link active' : 'navbar-link'}
      >
        产品列表
      </Link>
    </nav>
  );
};

3. 给宿主用户的使用提示 #

在你的包的README里写清楚：必须确保宿主项目已经用BrowserRouter（或HashRouter）包裹了根组件，否则你的组件会报错。

示例宿主项目的用法：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Navbar } from 'your-npm-package-name';
import Home from './pages/Home';
import Products from './pages/Products';

function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/products" element={<Products />} />
      </Routes>
    </BrowserRouter>
  );
}

4. 可选：兼容多版本React Router #

如果要同时支持v5和v6，要么在组件里做版本判断（比如通过react-router-dom的版本号区分API），要么在peer依赖里明确支持的版本范围，避免用户装了不兼容的版本导致报错。

内容的提问来源于stack exchange，提问作者Aleksandr Bolshakov sas6757