如何在React组件中检查当前页面链接是否包含指定字符串

在Next.js的Document组件中，你可以按以下步骤实现需求：

1. 获取当前页面路径 #

Document组件会在服务端和客户端都执行渲染，所以需要通过getInitialProps方法兼容两种环境，统一获取当前页面路径：

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    // 服务端从请求对象取路径，客户端直接用window.location
    const pathname = ctx.req ? ctx.req.url : window.location.pathname;
    return { ...initialProps, pathname };
  }

  render() {
    // 后续逻辑写在这里
  }
}

export default MyDocument;

2. 判断路径并执行对应操作 #

在render方法里，用字符串匹配或正则判断路径是否包含目标内容，再通过条件渲染执行对应操作：

render() {
  const { pathname } = this.props;
  // 简单匹配：检查路径是否包含"/MYSTRING/"
  const hasTargetPath = pathname.includes('/MYSTRING/');
  
  // 如果需要严格匹配"/MYSTRING/xx"（xx为任意字符），用正则：
  // const hasTargetPath = /\/MYSTRING\/.+/.test(pathname);

  return (
    <Html lang="en">
      <Head>
        {hasTargetPath && (
          {/* 这里写你要执行的操作，比如添加自定义标签、脚本等 */}
          <>
            <meta name="custom-meta" content="target-page-value" />
            <link rel="stylesheet" href="/custom-style.css" />
          </>
        )}
      </Head>
      <Body>
        <Main />
        <NextScript />
      </Body>
    </Html>
  );
}

关键说明 #

• getInitialProps是Next.js给Document组件提供的初始数据获取方法，能同时适配服务端和客户端的路径获取逻辑。
• 简单的包含判断用includes足够，复杂规则（比如路径后缀要求）可以用正则表达式实现更精准的匹配。
• 条件渲染区块里可以添加任意Head标签，或执行其他需要的逻辑。

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