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

Question

我已经做了一个模态分量与<HashRouter>中react-router，成为有效和无效用哈希网址即情态动词是无效的网址时，是/route和modal1是活跃的时候URL是/route#modal1。有什么方法可以在 next.js 中定义哈希路由？

Answer 1

以哈希符号（标识 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})
  })

然后获取 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
    }
  }