next-routes 自定义路由在服务器端渲染失败

Question

我正在关注一个使用 next-routes 定义自定义通配符路由的在线教程，但我无法让它工作。

server.js:

const { createServer } = require("http");
const next = require("next");

const app = next({
  dev: process.env.NODE_ENV !== "production"
});

const routes = require("./routes");

const handler = routes.getRequestHandler(app);

app.prepare().then(() => {
  createServer(handler).listen(3000, (e) => {
    if (e) throw e;
    console.log("Ready on localhost:3000");
  });
});

routes.js:

const routes = require("next-routes")();

routes.add("/campaigns/:address(0x[0-9a-fA-F]+)", "campaigns/show");

module.exports = routes;


### `campaigns/show.js`:

import React from "react";

class CampaignShow extends React.Component {
    static getInitialProps(props) {
        return {}
    }

    render() {
        return (
            <h3>Campaign Show</h3>
        )
    }
}

export default CampaignShow

当我从应用导航到 http://localhost:3000/campaigns/0x78E6Fdf23DBA11016c658cc93C4bBb4F63bDAf25 时，一切正常，我看到了我希望看到的页面。

但是，如果我尝试直接打开该 URL，服务器端呈现将无法正常工作，并且会出现 404 错误页面。

我在控制台中收到此错误：

Page does not exist: /campaigns/0x78E6Fdf23DBA11016c658cc93C4bBb4F63bDAf25
Error: Page does not exist: /campaigns/0x78E6Fdf23DBA11016c658cc93C4bBb4F63bDAf25
    at http://localhost:3000/_next/1543962700127/page/campaigns/0x78E6Fdf23DBA11016c658cc93C4bBb4F63bDAf25:3:21
    at register (http://localhost:3000/_next/1543962700127/main.js:20505:24)
    at PageLoader.registerPage (http://localhost:3000/_next/1543962700127/main.js:20530:9)
    at http://localhost:3000/_next/1543962700127/main.js:18414:14
    at Array.forEach (<anonymous>)
    at Object.<anonymous> (http://localhost:3000/_next/1543962700127/main.js:18410:30)
    at __webpack_require__ (http://localhost:3000/_next/1543962700127/manifest.js:714:31)
    at fn (http://localhost:3000/_next/1543962700127/manifest.js:117:20)
    at Object.<anonymous> (http://localhost:3000/_next/1543962700127/main.js:13708:9)
    at __webpack_require__ (http://localhost:3000/_next/1543962700127/manifest.js:714:31)

GET http://localhost:3000/campaigns/0x78E6Fdf23DBA11016c658cc93C4bBb4F63bDAf25 404 (Not Found)

我做错了什么？

Answer 1

将此行添加到您的show 顶部

import {withRouter} from 'next/router'

并将您的导出更新为：

export default withRouter(CampaignShow)

Answer 2

根据Next.js docs，getInitialProps 应该放在 React 组件之外，如下所示：

import React from "react";

class CampaignShow extends React.Component {
    render() {
        return (
            <h3>Campaign Show</h3>
        )
    }
}

Page.getInitialProps = async (ctx) => {
  return { }
}

export default CampaignShow

请注意，getInitialProps 仅在初始页面加载时进行服务器端提取，并在客户端路由时进行客户端提取。