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

Question

我有一个 monorepo，其中包含多个应用程序和库，效果非常好（基于纱线）。我最近做了一些重构，并确定了一个我想在我的“commons”库中“外包”的公共组件。这包含一个使用以下内容的组件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>
   );
}

当包含我的反应应用程序时，该组件就像一个魅力。但是，当提取到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库的方式有关。

公共/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>它需要是 a 的子级<Router>。

我尝试过的事情：

• 使用peerDependencies以便库和应用程序使用反应路由器的相同实例
• clean 和yarn 安装多次
• react-router&react-router-dom依赖关系的疯狂组合

Answer 1

withRouter是一个 HOC。您必须相应地使用它。来自文档：

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似乎没问题。