Question

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

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

有可能吗？

Answer 1

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

您需要做的第一件事就是设置路由。我在这里分享了一个示例：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参数的情况下渲染模式：

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

Answer 2

是的！您可以使用window.history.pushState来更改URL，而无需切换组件。

// Modal Button
<button onClick={() => {
    this.setState({ modal: true });
    window.history.pushState("","","/gallery/image/img_1233")
}}>
    Open Modal
</button>

//Link Button
<Link href="/gallery/image/img_1233">
    <a>Open Page</a>
</Link>

完整示例如下：https://github.com/singlepageprogrammer/react-modal-route-example

Answer 3

这个问题有点老了，但是自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

以及相关的PR：

https://github.com/vercel/next.js/pull/11473

Next.js-基于路由的模态

3 个答案: