简介
@eim-materials/basic-not-found-block 是一个基于 React 的通用“404 Not Found”页面模块。它提供了一个包含基本信息的自适应、美观的页面构建块，为用户提供更加友好的错误提示。
安装
你可以通过 npm 途径安装 @eim-materials/basic-not-found-block 包：
npm install @eim-materials/basic-not-found-block
基本用法
下面是如何在项目中使用 @eim-materials/basic-not-found-block 的示例：
- 在组件中引入 @eim-materials/basic-not-found-block：
import BasicNotFoundBlock from '@eim-materials/basic-not-found-block';
- 调用 BasicNotFoundBlock 组件并传入自定义错误信息：
<BasicNotFoundBlock title="404 Not Found" subTitle="The requested page does not exist" buttonText="Return to Home" buttonLink="/" />
其中，“title”表示错误页面的大标题，“subTitle”用于显示自定义错误信息，“buttonText”则是用于标识返回主页的按钮文本，“buttonLink”则是按钮应该跳转的链接。
高级用法
自定义样式
可以通过在组件的父元素中嵌套一个 css 样式块的方式来自定义样式，示例代码如下：
-- -------------------- ---- -------
------ ------------------ ---- ---------------------------------------
------ --------------------- -- -------
-- ---- --
---- -------------------------
-------------------
---------- --- ------
------------- --------- ---- ---- --- ------
------------------ -- -----
--------------
--
------接着，在 custom-style.css 文件中定义样式：
.custom-class .basic-not-found-block {
background-color: #f0f0f0;
/* 其他样式定义 */
}自定义图标
可以通过传入 icon 参数来自定义图标，示例代码如下：
<BasicNotFoundBlock
title="404 Not Found"
subTitle="The requested page does not exist"
buttonText="Return to Home"
buttonLink="/"
icon={<YourCustomIcon />} // 自定义图标组件
/>其中，“YourCustomIcon” 表示自定义图标的组件。
总结
@eim-materials/basic-not-found-block 是一个易于使用和扩展的 React 组件，帮助前端开发者创建通用的错误页面。通过本文章的学习，你已经学会了如何使用和扩展 @eim-materials/basic-not-found-block。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f8e238a385564ab6ee3