时间戳

首页 > 解决方案 > NextJS 和 next-routes 没有像我期望的那样路由

reactjs - NextJS 和 next-routes 没有像我期望的那样路由

问题描述

我创建了一个 routes.js 文件，如下所示：

const nextRoutes = require('next-routes');
const routes = module.exports = nextRoutes();

routes.add
    ('presenterallcurrent', '/presenter/:ccyear','speaker');
routes.add
    ('speakersessiondetail', '/presenter/:ccyear/:slugSpeaker','speakerdetail');

我期待当我浏览到：

/presenter/2018/douglas-crockford-1124

我将被带到我的 /pages/speakerdetail.js 文件，其中 query.ccyear 和 query.slugSpeaker 填充为 2018 年和 douglas-crockford-1124

我期待当我浏览到

/presenter/2018

我将被带到 /pages/speaker.js，query.ccyear 设置为 2018

第二种情况按我的预期工作（/presenter/2018）确实将我带到 /pages/speaker.js，但是（/presenter/2018/douglas-crockford-1124 给了我一个 404。

我不明白什么，为什么这不起作用？

在我的 /pages/speaker 和 /pages/speakerdetail 中：

    static async getInitialProps({query}) {...}

标签： reactjsnext.js

解决方案

对于路线中的可选参数，添加尾随?并调整speaker.js以根据是否query.slugSpeaker未定义来呈现年视图或详细视图。

routes.add
    ('speaker', '/presenter/:ccyear/:slugSpeaker?');

推荐阅读