我如何知道我是否在 React 路由器中？

Question

我正在开发一个呈现各种链接的 web 浏览器扩展。 这些链接可以在“应用程序”路径（扩展程序中的app.html ）内呈现，也可以从浏览器操作 window（菜单栏中的扩展程序按钮）呈现。

该应用程序定义了一个 React 路由器； 弹出窗口没有。

当我在应用程序本身中呈现链接时，我可以使用：

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

// ...

<Link to={...}>Foo</Link>

但是，在弹出窗口本身中，这不起作用，因为我收到错误：

Invariant failed: You should not use <Link> outside a <Router>

这当然是有道理的。 但是我想通过帮助程序 function 或组件创建链接，我如何确定我当前是否在路由器“内部”？

请注意，原则上我可以传递一个明确告诉组件它是否是路由器的一部分的道具，但这似乎非常冗长。

Answer 1

您可以通过尝试使用useHistory钩子获取历史 object 来确定层次结构中是否有路由器组件

import { useHistory } from 'react-router-dom';
const Comp = () => {
    const history = useHistory();

    if(!history) {
       // no router in hierarchy
     }
}