如何将 axe-core 与 NextJS 应用程序路由器一起使用

考虑到 NextJS 中应用程序路由器引入的变化，有没有办法将 axe-core 与 NextJS 应用程序集成？

import type React from 'react'
 
export const reportAccessibility = async (
  App: typeof React,
  config?: Record<string, unknown>
): Promise<void> => {
  if (process.env.NODE_ENV !== 'production') {
    const axe = await import('@axe-core/react')
    const ReactDOM = await import('react-dom')
 
    axe.default(App, ReactDOM, 1000, config)
  }
}
 
export default reportAccessibility

在旧的页面路由器中我们曾经这样做：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import reportAccessibility from './reportAccessibility'
 
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
)
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)
 
reportAccessibility(React)

这不再相关。不幸的是，我在 axe-core 或 NextJS 文档中找不到任何与此相关的内容。有人想出来了吗

0
投票

您可以创建一个导入和初始化的客户端组件

@axe-core/react

 并将该组件包含在您的根布局文件中。

这就是我实现该组件的方式

Axe.tsx

：

'use client';

import React from 'react';

const Axe: React.FC = () => {
  if (typeof window !== 'undefined' && process.env.NODE_ENV !== 'production') {
    Promise.all([import('@axe-core/react'), import('react-dom')]).then(
      ([axe, ReactDOM]) => axe.default(React, ReactDOM, 1000)
    );
  }
  return null;
};

export default Axe;

然后只需在主

Axe

 文件中使用

app/layout.tsx

 组件即可：

import React from 'react';
import Axe from '@/components/a11y/Axe';

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        <Axe />
        {children}
    </html>
  );
}

问题描述投票：0回答：1

1个回答

最新问题

如何将 axe-core 与 NextJS 应用程序路由器一起使用

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1