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

Question

我有一个包含多个应用程序和库的 monorepo，它运行得非常好（基于纱线）。我最近做了一些重构，并确定了一个我想在我的“公共”库中“外包”的公共组件。这包含一个使用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 库有关。

commons/package.json:

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

app/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"
  }
}

app/app.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> 的子代。

我尝试过的事情：

• 使用peerDependencies，以便库和应用使用相同的反应路由器实例
• clean & yarn install 多次
• 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 的初始化似乎没问题。