React(Next.js)中如何基于动态URL变量使用if else条件渲染

JSX语法中不能直接在return的节点内写常规if/else语句，二选一的渲染场景直接用三元表达式实现即可，这是React条件渲染最常用的写法，直接替换你代码里div标签内的注释部分就能生效。

基础实现代码 #

import { useRouter } from 'next/router'
const Header = () => {
  const router = useRouter();
  const url = router.asPath;

  return (
    <>
      <div>
        {url === '/' 
          ? /* 匹配到首页路径时渲染的第一个头部 */ <div>首页专属头部内容</div>
          : /* 其余路径渲染的第二个头部 */ <div>全站通用头部内容</div>
        }
      </div>
    </>
  )
}

注意事项 #

• 三元表达式的固定写法是{判断条件 ? 条件成立渲染内容 : 条件不成立渲染内容}，支持直接引用组件内定义的动态变量做判断。
• 如果你的首页可能携带查询参数（比如/?channel=wechat这种带?后缀的链接），用router.asPath判断会匹配失败，建议换成router.pathname做判断，pathname返回的是不带查询参数的纯路由路径，不会因为链接带参数出现误判，替换取值代码即可：

  const { pathname } = router;
  // 后续判断用 pathname === '/' 即可
  

• 如果后续要扩展更多路径的头部匹配规则，可以把判断逻辑提前写到return外面，用变量承接渲染内容，逻辑会更清晰，示例代码如下：

  const Header = () => {
    const router = useRouter();
    const { pathname } = router;
    let headerNode;
  
    if (pathname === '/') {
      headerNode = <div>首页头部</div>
    } else if (pathname.startsWith('/user/')) {
      headerNode = <div>个人中心专属头部</div>
    } else {
      headerNode = <div>通用头部</div>
    }
  
    return (
      <>
        <div>{headerNode}</div>
      </>
    )
  }
  

内容的提问来源于stack exchange，提问作者amit