如何在React（Next.js）中根据URL条件显示不同内容

云上老周

2026-8-4

在Next.js中根据URL参数渲染不同文本内容的实现方案

你需要根据Next.js使用的路由模式（Pages Router 或 App Router）选择对应实现方式，同时修正原代码中在JSX里直接写if语句的语法问题，以下是具体实现：

情况1：使用Pages Router（slug.js位于pages目录）

客户端组件实现（无需服务器数据时推荐）

通过useRouter钩子获取URL的query参数：

import { useRouter } from 'next/router';

export default function SlugPage() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div id="neww" className="neww">
      {/* 用三元表达式判断参数值，渲染对应文本 */}
      <h3>{id === 'pinned' ? 'Pinned' : 'Newest'}</h3>
    </div>
  );
}

服务器端渲染实现（需在服务器端处理参数时使用）

通过getServerSideProps在服务器端获取参数，再传递给页面组件：

export async function getServerSideProps(context) {
  const { id } = context.query;
  return {
    props: { isPinned: id === 'pinned' },
  };
}

export default function SlugPage({ isPinned }) {
  return (
    <div id="neww" className="neww">
      <h3>{isPinned ? 'Pinned' : 'Newest'}</h3>
    </div>
  );
}

情况2：使用App Router（slug.js位于app目录）

在App Router中需使用useSearchParams钩子获取URL参数，注意要添加'use client'指令声明为客户端组件：

'use client';
import { useSearchParams } from 'next/navigation';

export default function SlugPage() {
  const searchParams = useSearchParams();
  const id = searchParams.get('id');

  return (
    <div id="neww" className="neww">
      <h3>{id === 'pinned' ? 'Pinned' : 'Newest'}</h3>
    </div>
  );
}