在三元运算符中使用多个条件来停止在特定路由上渲染组件

Question

我有一个组件侧菜单。 我想在所有页面上都有它，除了 singIn 和 singUp 页面。 我选择这样做的方式是使用“useLocation”并在渲染组件之前检查 location.pathname。 它看起来像这样：

let location = useLocation().pathname;
  return (
location !== '/signin' && '/signup' ? (
  <div>sidemenu</div>
) : (
  <>
  </>
)

但它仅适用于第一个语句。 是否可以传递多个语句？ 或者可能有另一种方法不在两个/三个特定页面上呈现组件？

Answer 1

任何 boolean 表达式在三进制中都有效。

但是， location !== '/signin' && '/signup'被解析为：

(location !== '/signin') && ('/signup')

所以你应该写：

`location !== '/signin' && location !== '/signup'

---

此外，而不是语法

(expression) ? (
  <div>sidemenu</div>
) : (
  <>
  </>
)

如果您不希望在false情况下呈现任何内容，则可以使用：

return (expression) && (<div>sidemenu</div>)

如果表达式为 false，它将返回false并且不呈现任何内容，或者如果表达式为 true，它将呈现您的 div。

---

此外，检查路径名列表的一个很好的语法是使用includes ，如下所示：

['/signin', '/signup'].includes(useLocation().pathname)

如果您决定要添加另一条路径，那么您将拥有一个易于扩展的单线