时间戳

首页 > 解决方案 > 是否可以在 next.js 中定义哈希路由？

javascript - 是否可以在 next.js 中定义哈希路由？

问题描述

我已经制作了一个模态组件，其中<HashRouter>inreact-router使用哈希 url 变得活跃和不活跃，即当 url 为时模式是不活动的，当 url 是/route时modal1是活跃的/route#modal1。有什么方法可以在 next.js 中定义哈希路由？

标签： javascriptreact-routermodal-dialognext.js

解决方案

以哈希符号（标识 html 实体）开头的 url 部分永远不会发送到服务器，因此您无法匹配 url 服务器端（如果浏览器加载/route#modal1服务器将加载/route）您可以做的是：

选项1处理模态渲染客户端，next/router 在您的组件中使用类似这样的东西：（
我假设您正在使用类组件） 

  import Router from 'next/router'

  ....

  componentDidMount(){
    let id = Router.asPath.match(/#([a-z0-9]+)/gi )
    if(id){
      // i will show the modal
    }else{
      // something else
    }
  }

选项 2将 id 传递给不带#.
在您server.js添加类似于此的路线：

  server.get('/route/:id?', (req, res) => {
    let {id} =  req.params 
    return app.render(req, res, '/mypage', { id})
  })

然后抓住身份证，例如。在getInitialProps 

  static async getInitialProps (context) {
    let ctx  = context.query;
    return ctx
  }

并处理模态

  componentDidMount(){
    let {id} =  this.props    
    if(id){
      // i will show the modal
    }else{
      // something else
    }
  }

推荐阅读