Question

我使用NextJS版本9.1.3。

并且我具有带有exportpathmap的动态路由。

这是动态路线组件：

import { Spin, Icon } from 'antd';
import { Component } from 'react';
import getLocks from '../../data/helper/getLocks';
import PageTemplate from '../../components/PageTemplate';
import RenderLock from '../../components/RenderLock';

const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;

class lockdetails extends Component {

  static async getInitialProps({ query }) {
    const lockToReturn = getLocks().find((el) => el.id === query.lockID);
    return { lock: lockToReturn };
  }

  render() {
    const { lock } = this.props;

    return lock ? (
      <PageTemplate>
        <div
          style={{
            margin: '0 auto',
            marginBottom: 20,
            marginTop: 20,
          }}
        >
          <RenderLock lock={lock} />
        </div>
      </PageTemplate>
    ) : <Spin indicator={antIcon} />;
  }
}
export default lockdetails;

它是这样工作的（如果我使用<Link>，但是如果我

重新加载页面我总是会收到404错误
在https://mywebsite.com/details/1/之类的浏览器中调用动态uri，我也会收到404错误。

正如我所说，如果我单击此路线，则效果很好。这表明自定义路由是正确的。

我在做什么错？

Answer 1

重新加载页面时，将在服务器端呈现页面。您正在向服务器发出请求，并且看起来服务器没有任何响应，因此您收到404错误。

我建议您使用next-routes npm软件包。

https://www.npmjs.com/package/next-routes

它具有非常简单的api。解释很清楚。

或共享您的server.js文件，我可以在您的server.js上找到问题

Next.js动态路由-重新加载页面404或直接调用动态路由

1 个答案: