如何根据路径 react.js 有条件地渲染元素

Question

所以我正在使用 react.js 和 ruby​​ on rails 创建一个博客应用程序。我的导航组件中有这些按钮，我需要根据用户所在的路径有条件地渲染它们。我正在使用useLocation 来完成此操作，并且几乎可以将它放在我想要的位置。我遇到的问题是让它们在可以看到帖子的三个主要路径（'/general'、'/resources'和'/events'）中呈现，同时在用户进入帖子查看时隐藏它们厘米。如果我删除 /path/id，按钮将显示在这些路径中，但正如我所说，我需要它们不要在 /path/id 中仅呈现 /path。我怎样才能做到这一点？

const [getAllPosts, setGetAllPosts] = useState([])

useEffect(() => {
      const fetchData = async () => {
        const res = await fetchAllPosts()
        setGetAllPosts(res.filter(post => {
          return post.category.title === 'general' || post.category.title === 'resources' || post.category.title === 'events'
        }))
      }
      fetchData()
    }, [])

return (   
{getAllPosts.forEach((generalPost, resourcePost, eventsPost) => {return location.pathname === '/user' || location.pathname === '/about' || location.pathname === '/create' || location.pathname === `/general/${generalPost.id}` || location.pathname === `/general/${resourcePost.id}` || location.pathname === `/general/${eventsPost.id}` ? (<></>) : (<div className={open ? 'RegisterContainerMobileOpen' : 'RegisterContainerMobile'}>
            {currentUser ? (
              <button onClick={handleLogout} className='logoutmobile'>Logout</button>
              ) : (
              <Link to='/user' className='resgisterlinkmobile'>
                <button className='registermobile'>Signin/Signup</button>
              </Link>
            )}
          </div>)})})

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

如果您需要查看我的其余代码，请告诉我。我一直在夜以继日地工作，几乎没有睡眠，所以我觉得我错过了一些简单的东西。

编辑：我也尝试过使用.map()，但由于 map 返回了一个新数组，因此可以取回同一个按钮的多个实例。我在研究中研究了React.memo，但我不完全确定我将如何使用它，或者即使它可以解决映射问题

注意：在阅读了有关 React.memo 的更多文档后，这似乎没有帮助

Answer 1

在不深入研究任务的情况下，尝试添加return，而不是forEach，使用map。请记住，forEach 不会返回任何内容，这与 map 不同。

所以它可能看起来像这样：

useEffect(() => {
...
}

return getAllPosts.map(...