Javascript 指定时，react中的错误页未正确链接到

您好，我正在尝试在react中创建一个简单的错误页面：我执行了以下操作： 我首先创建了404错误页面404page.css的css页面，路径为public/css/404page.css，因此css文件夹位于public文件夹中，文件位于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%;
  }

然后，我创建了名为404errorpage.js的js文件，路径为pages/404errorpage.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;

从“React”导入React；
导入“/../404page.css”
常数NoMatch=（）=>{
返回(
404
找不到页面
您正在查找的页面不存在或发生其他错误

)
}
导出默认NoMatch；

现在，我尝试在名为sr.js的文件上测试页面，路径为components/background/sr.js，因此我在该文件中执行了以下操作：

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

测试404页面点击此处

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

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

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

---

我正在遵循一个我在网上看到的例子，但出于某种原因，我的不起作用？你知道我做错了什么吗？或者有更好的方法吗？

因为您使用的是Nextjs，所以您可以按照他们的官方说明如何创建错误页面

它需要在

页面

文件夹中创建一个名为

404.js

的文件

//pages/404.js
导出默认函数Custom404（）{
返回404-找不到页面
}

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

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

例如：

//组件/my-error-page.js
从“./my error page.module.css”导入样式
const MyErrorPage=（）=>{
找不到返回页
}
导出默认MyErrorPage

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

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

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

//pages/404.js
从“../components/my error page”导入MyErrorPage
导出默认函数Custom404（）{
返回
}

您正在使用react路由器吗？您可以显示路由器/交换机/路由设置吗？您的导入应该是

/css/404page.css

或

/css/404page.module.css

。可能是因为您的错误页中有错误，所以它给出了另一个错误页。您的错误页在说什么？如果您没有使用react router，您从哪里获得

组件？此外，一般来说，React应用程序是SPA（单页应用程序）。他们不使用标准导航，因为这样会卸载整个React应用程序并加载一个新页面。这意味着您正在使用next.js，这是非常相关的信息。我自己从来没有使用过它，但是快速查看一下，显然您所需要做的就是调用文件

404.js

，并将其放入您的pages文件夹中。然后你链接到一些任意但不存在的页面，如

href=“/idontexist”

（另外，如果你正在学习教程，最好在你的问题中链接到它）这就像一个符咒，404终于改变了，但是当我试图通过安装在my-error-page.js中进行自定义时。我收到一个错误，说在路径public/css/my-error-page.css中创建了文件my-error-page.module.css后，./my-error-page.module.css在my-error-page.js中找不到或无法解析，这是我再次收到css错误的原因吗？你现在不再将css放在公用文件夹中了（在大多数框架中），它都是用组件编译的（尽管对于全局css，您必须在

\u app.js

中导入它）。因此，如果您的组件名为

MyComponent

，那么它应该在文件

my component.js

中，css应该在

my component.module.css

中（在同一文件夹中）.我在答案的第三行提到了这两种方法。希望能有所帮助。