Reactjs 在基于路由的React中隐藏元素

如果路由是

/jobs

和

/account

，我想隐藏

右侧菜单。
我的问题是，如果
/jobs
和
/account
有子路由，如
/jobs/1
或
/accounts/2
。我该如何包括它？有没有办法隐藏这个？还有比我的代码更好的方法吗

更新

如果我们想在
/jobs/new
上显示
右侧菜单，而不是在
/jobs/1
上显示，该怎么办？差不多吧

请检查我的代码沙盒在这里

最好的方法是使用路径名更改时将更新的状态：

import React, { Suspense, lazy, useState, useEffect } from "react";
....

function PagesRoute({ match: { url } }) {
  const classes = useStyles();
  const location = useLocation();
  const [showMenu, setShowMenu] = useState(true);
  const [noRightMenusRoutes, setNoRightMenusRoutes] = useState([
    "/jobs",
    "/account"
  ]);

  useEffect(() => {
    console.log(location.pathname);
    const noRightMenus = noRightMenusRoutes.findIndex((el) => {
      return location.pathname.includes(el);
    });

    setShowMenu(noRightMenus === -1);
  }, [location, noRightMenusRoutes]);

  ...

 <Grid item xl={3} lg={3} md={3}>
                {!showMenu ? null : <RightMenu />}
 </Grid>

import React，{suspent，lazy，useState，useffect}来自“React”；
....
函数PagesRoute（{match:{url}}）{
const classes=useStyles（）；
const location=useLocation（）；
const[showMenu，setShowMenu]=使用状态（true）；
常量[noRightMenusRoutes，setNoRightMenusRoutes]=useState([
“/jobs”，
“/帐户”
]);
useffect（（）=>{
console.log（location.pathname）；
const noRightMenus=noRightMenusRoutes.findIndex（（el）=>{
返回位置.pathname.includes（el）；
});
设置显示菜单（noRightMenus==-1）；
}，[位置，noRightMenusRoutes]；
...
{！显示菜单？空：}


您不应该在JSX中使用函数进行渲染，这些函数可以用作事件处理程序。
最好的方法是使用一个状态，该状态将在路径名更改时更新：

import React, { Suspense, lazy, useState, useEffect } from "react";
....

function PagesRoute({ match: { url } }) {
  const classes = useStyles();
  const location = useLocation();
  const [showMenu, setShowMenu] = useState(true);
  const [noRightMenusRoutes, setNoRightMenusRoutes] = useState([
    "/jobs",
    "/account"
  ]);

  useEffect(() => {
    console.log(location.pathname);
    const noRightMenus = noRightMenusRoutes.findIndex((el) => {
      return location.pathname.includes(el);
    });

    setShowMenu(noRightMenus === -1);
  }, [location, noRightMenusRoutes]);

  ...

 <Grid item xl={3} lg={3} md={3}>
                {!showMenu ? null : <RightMenu />}
 </Grid>

import React，{suspent，lazy，useState，useffect}来自“React”；
....
函数PagesRoute（{match:{url}}）{
const classes=useStyles（）；
const location=useLocation（）；
const[showMenu，setShowMenu]=使用状态（true）；
常量[noRightMenusRoutes，setNoRightMenusRoutes]=useState([
“/jobs”，
“/帐户”
]);
useffect（（）=>{
console.log（location.pathname）；
const noRightMenus=noRightMenusRoutes.findIndex（（el）=>{
返回位置.pathname.includes（el）；
});
设置显示菜单（noRightMenus==-1）；
}，[位置，noRightMenusRoutes]；
...
{！显示菜单？空：}


您不应该使用JSX内部的函数进行渲染，这些函数可以用作事件处理程序。
React router的函数是处理这些事情的非常方便的实用工具
你可以这样做

const noRightMenusRoutes=[“/jobs”、“/account”]；
const isMatching=noRightMenusRoutes.some（路径=>{
常量匹配=匹配路径（location.pathname{
路径：路径，
确切地说：是的
})
返回match&&match.isExact
})

使用它还可以帮助您处理带有参数的路径，例如
/jobs/：jobId
React路由器的功能是处理这些事情的非常方便的实用工具
你可以这样做

const noRightMenusRoutes=[“/jobs”、“/account”]；
const isMatching=noRightMenusRoutes.some（路径=>{
常量匹配=匹配路径（location.pathname{
路径：路径，
确切地说：是的
})
返回match&&match.isExact
})

使用此选项还可以帮助您处理带有参数的路径，例如
/jobs/：jobId
谢谢。如果我们想在
/jobs/new
上显示
右菜单
，而不是在
/jobs/1
上，那该怎么办？诸如此类……您能将两个单独的函数集成到一个，这样我们有多个函数时就更容易了吗路线？谢谢，这是可能的，对吧？不客气，你可以用regexThank谢谢。如果我们想在
/jobs/new
上显示
右侧菜单
，而不是在
/jobs/1
上，怎么样？诸如此类……你能把两个单独的功能集成到一个，这样我们有多条路线时就更容易了吗？谢谢可能吧？不客气，你可以用正则表达式