Reactjs 在特定管线和视口高度上有条件地渲染组件

目标：当启用

/

路线和视口高度超过1000px时，不要渲染导航组件

但是，

导航

组件应在其他路线上呈现（例如，

附属代码

，

仪表板

，

编辑器

，等等）

你知道我该怎么做吗

{user.uid&&(
！[“/send invite”、“/：id”]包括（window.location.pathname）和(
)
}
/>
)}

好的，因为您使用的是

ReactRouter

我建议使用它提供的钩子以反应方式检查当前路由

另外，我建议您安装

react use

，这样您就可以使用他们的钩子以反应方式检查窗口高度。如果有人在初始加载后使屏幕变小，这将使您能够隐藏导航栏

import React from 'react';
import { useLocation } from "react-router-dom";
import { useMedia } from 'react-use';

export const Navigation = ({ newNotification }) => {
    let { pathname } = useLocation();
    const isTallEnough = useMedia('(min-height: 1000px)');

    if (pathname !== '/' || !isTallEnough) return null;

    return (
        <div>
            ...your navigation
        </div>
    )
}

从“React”导入React；
从“react router dom”导入{useLocation}；
从“react use”导入{useMedia}；
导出常量导航=（{newNotification}）=>{
让{pathname}=useLocation（）；
const isTallEnough=useMedia（‘（最小高度：1000px）’）；
如果（路径名！='/'| |！isTallEnough）返回null；
返回(
…您的导航
)
}

我建议您看看路由器提供的挂钩。 以下是链接：

您有四个，其中一个应该可以使您获得与

/

路径的精确匹配：

• 使用历史
• 使用地点
• useParams
• 用户路由匹配

---

您使用的是哪个路由库？@DejanSandic React routerAwesome，但是，当我将/：id添加到我不想渲染导航栏的路径名列表中时，它仍然显示出来。有什么想法吗？刚刚更新了我的代码。太棒了，非常感谢！这救了我：pNP，很高兴提供帮助