javascript - 在库中使用 React 路由器 - 无法使用 useHistory()

Question

我有一个包含多个应用程序和库的 monorepo，效果非常好(基于 yarn )。我最近做了一些重构，并确定了一个我想在我的“公共(public)”库中“外包”的公共(public)组件。这包含一个使用 ReactRouter.Route 的组件:

import React from 'react';
import { Route, useHistory } from 'react-router-dom';

export const AuthenticatedRoute = (props: Props): JSX.Element => {
   const history = useHistory(); // Crashes here

   ... do auth stuff ...

   useEffect(() => {
     if (!authenticated) {
        history.push(...);
     }
   }, []);

   return (
     <Route {...props}>
       {props.children}
     </Route>
   );
}

当包含我的 react 应用程序时，这个组件就像一个魅力。但是，当提取到 commons库，它在运行时失败并出现以下错误:

Uncaught TypeError: Cannot read property 'history' of undefined
    at useHistory (index.js:5914)
    at AuthenticatedRoute (index.js:9848)
    at renderWithHooks (react-dom.development.js:16260)
    at mountIndeterminateComponent (react-dom.development.js:18794)
    at beginWork$1 (react-dom.development.js:20162)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at beginWork$$1 (react-dom.development.js:25780)
    at performUnitOfWork (react-dom.development.js:24695)

我想这与库/应用程序如何引用 react-router-dom 有某种关系。图书馆。
公共(public)/package.json:

{
  "name": "commons",
  "version": "1.0.0",
  "main": "dist/index.js",
  "private": true,
  "dependencies": {
  },
  "peerDependencies": {
    "react-router-dom": "^5.1.2"
  }
}

应用程序/package.json:

{
  "name": "app",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-router-dom": "^5.1.2",
    "commons": "1.0.0"
  }
}

应用程序/应用程序.ts:

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';

export const App = (): JSX.Element => {
  return (
    <Router>
      <AuthenticatedRoute />
    </Router>
  );
};

注意:如果我评论 useHistory ，它在 <Route> 处失败说它需要是 <Router> 的 child 它是。
我尝试过的事情:

使用 peerDependencies以便库和应用程序使用相同的 react 路由器实例

多次清洁和 yarn 安装

react-router 的狂野组合& react-router-dom依赖

Answer 1

withRouter是一个 HOC。你必须相应地使用它。来自 documentation :

import { withRouter } from "react-router";

class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  };

  ...
}

const ShowTheLocationWithRouter = withRouter(ShowTheLocation);

BrowserRouter的初始化看起来不错。