Next.js-基于路由的模态 [英] Next.js - route based modal

问题描述

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

When using Next.js, I want to show a modal based on a url, on top of another page.

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

If gallery.js is the page component, I want /gallery/image/1232132 to display a modal with an image, on top of the gallery page.

有可能吗?

推荐答案

如果我正确理解了您的问题，则希望向各个图库项目添加深层链接.这是可能的，但是您需要一个自定义服务器来处理自定义路由.

If I understand your question correctly you want to add deep links to the individual gallery items. This is possible, but you need a custom server to handle custom routes.

您需要做的第一件事就是设置路由.我在这里分享了一个示例:将React Router与Next JS路由配合使用.

The first thing you need to do is setup the routes. I shared an example here: 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参数的情况下渲染模式:

Then you can access this parameter in the getInitialProps method, and render the modal if the image parameter is set:

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>
        );
    }
}

这篇关于Next.js-基于路由的模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！