Next.js - 基于路由的模式答案

【问题标题】：Next.js - route based modalNext.js - 基于路由的模式
【发布时间】：2018-12-24 03:03:34
【问题描述】：

使用 Next.js 时，我想在另一个页面的顶部显示基于 url 的模式。

如果gallery.js 是页面组件，我希望/gallery/image/1232132 在图库页面顶部显示带有图像的模式。

这可能吗？

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

这个问题有点老了，但自 2020 年 3 月以来，官方 Next.js 存储库中有一个完整示例（您可能应该使用它，因为它必须是维护者的“推荐方式”）：

https://github.com/vercel/next.js/tree/canary/examples/with-route-as-modal

这是原始问题：

https://github.com/vercel/next.js/issues/8023

【讨论】：

好的，但是这个例子在当前页面的顶部为您提供动态 url 或模式。它没有显示如何在当前页面顶部有一个在刷新时持续存在的模式

【解决方案2】：

如果我正确理解您的问题，您希望将深层链接添加到各个画廊项目。这是可能的，但您需要一个自定义服务器来处理自定义路由。

您需要做的第一件事是设置路线。我在这里分享了一个例子：using React router with Next JS route。

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

routes
    .add('gallery', '/gallery')
    .add('gallery-item', '/gallery/image/:image', 'gallery')

那么就可以在getInitialProps方法中访问这个参数，如果设置了image参数就渲染modal：

import React from 'react';
import PropTypes from 'prop-types';

export default class Gallery extends React.Component {
    static propTypes = {
        image: PropTypes.string
    };
    
    static getInitialProps({query: {image}}) {
        return {image};
    }

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

        return (
            <div>
                {image &&
                    // render modal
                }
                // render gallery
            </div>
        );
    }
}

【讨论】：