如何在 react-router 的特定路由上隐藏按钮组件

Question

我是 javascript 的新手并且有反应。我做了很多谷歌搜索，但没有解决方案。我试图在当前显示的三个 pages/routes 之一上隐藏一个按钮组件，但是当我尝试这样做时，它隐藏在所有 pages/routes 上。这是代码：


const routes = [
  { 
    path: '/:bookId/details',
    title: 'Book Details', 
    component: BookDetailsPage, 
    hideButton: true 
  },
  { 
    path: '/:bookId', 
    title: 'Details', 
    component: BookPage,
    exact: true, 
    hideButton: false 
  },
  { 
    path: '/',
    title: 'Book',
    component: BookListPage, 
    hideButton: false
  }
];

const Page = (): React.ReactElement => {

  const isBookDetailsPage = routes[0].hideButton; //returns true

  return (
      <ContentMasterLayout
        title="Book"
        action={
          <Box display="flex">
            //this approach hides the button on all pages
            {!isBookDetailsPage &&
               <BookButton transactionId={match?.params.bookId} />}
          </Box>
        }
      >
        <LocalRouter routes={routes} />
      </ContentMasterLayout>
  );
};

如有任何帮助，我们将不胜感激。提前致谢

Answer 1

我不会使用 hideButton 值，因为它对所有其他页面都是正确的，

我将通过查看路线上的路径名来检查当前页面，如果路线有详细信息，则 isBookDetailsPage 为 true，如果没有，则为 false

所以从技术上讲，您的代码应该如下所示

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

const Page = (): React.ReactElement => {
  
  const location = useLocation();
  
  // will be true/false
  const isBookDetailsPage = location.pathname.includes('details');

  return (
      <ContentMasterLayout
        title="Book"
        action={
          <Box display="flex">
            {!isBookDetailsPage &&
               <BookButton transactionId={match?.params.bookId} />}
          </Box>
        }
      >
        <LocalRouter routes={routes} />
      </ContentMasterLayout>
  );
};

在上面的示例中，我在 react-router-dom V5.1, 上使用了 useLocation() 挂钩，但您也可以使用 props.location.pathname 或普通的 javascript window.location.pathname

如何在 react-router 的特定路由上隐藏按钮组件

How to hide a button component on a particular route in react-router

javascript

reactjs

react-router

react-router-v4

react-router-dom