当指定时未正确链接react中的错误页

Question

嗨，我正试图在react中创建一个简单的错误页面:我做了以下工作:首先为名为404page.css的404错误页创建css页面，路径为public / css /404 page.css，因此css文件夹位于公用文件夹中，文件位于css文件夹中：

h1{
    font-size:80px;
    font-weight:800;
    text-align:center;
    font-family: 'Roboto',sans-serif;
  }
  h2{
    font-size:25px;
    text-align:center;
    font-family:'Roboto',sans-serif;
    margin-top:-40px;
  }
  p{
    text-align:center;
    font-family:'Roboto',sans-serif;
    font-size:12px;
  }
  .container
  {
    width:300px;
    margin:0 auto;
    margin-top: 15%;
  }

然后，我使用path pages/404 Errorpage.js创建了名为404errorpage.js的js文件：

import React from 'react';
import '/../404page.css'


const NoMatch=()=>{

  return(
    <div class='container'>
    <h1 >404</h1>
    <h2 >Page Not Found</h2>
    <p >The page that you are looking for doesn't exist or another error occurred.</p>

    </div>
  )
}
export default NoMatch;

现在，我正尝试在一个名为sr.js的文件上测试这个页面，该文件的路径组件/背景/sr.js是这样的，所以我在文件中做了以下工作：

 <p> testing out the 404page click here <Link href= "pages/404errorpage">this</Link> </p>

但是，当我在本地运行并单击链接时，我会被定向到标准错误页面，而不是我创建的错误页面。下面是错误页面的图片：

​

​

我正在效仿我在网上看到的一个例子，但由于某种原因，我的榜样不起作用？对我做错了什么有什么想法吗？还是有更好的方法来做呢？

Answer 1

由于您使用的是Nextjs，所以您可以按照它们的官方文档说明如何生成错误页面。

它特别涉及在404.js文件夹中创建一个名为pages的文件。

// pages/404.js
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>
}

要使用css，可以使用加载在_app.js中的CSS或css模块。

我建议创建一个安装在错误页面中的组件。

例如：

// components/my-error-page.js
import styles from './my-error-page.module.css'

const MyErrorPage = () => {
  return <div className={styles.container}>Page was not found</div>
}

export default MyErrorPage

然后将其加载到错误页面：

// pages/404.js
import MyErrorPage from '../components/my-error-page'

export default function Custom404() {
  return <MyErrorPage />
}