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

【问题标题】：How do I know if I am inside a React router?我如何知道我是否在 React 路由器中？
【发布时间】：2020-05-22 08:08:39
【问题描述】：

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

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

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

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

// ...

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

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

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

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

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

【问题讨论】：

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

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

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

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

【讨论】：

很高兴能帮上忙 :-)