Is it possible to define hash route in next.js?

Question

I had already made a modal component with <HashRouter> in react-router that became active and inactive with hash url i.e modals is inactive when url is /route and modal1 is active when url is /route#modal1. There is any ways to define hash routes in next.js?

Answer 1

The part of the url starting with the hash symbol (that identifies an html entity) is never sent to the server, so you cant match the url serverside (if the browser loads /route#modal1 the server will load /route) what you can do is :

Option 1 Handle the modal rendering client side, using next/router in your component with something like this :
(im assuming you are using class components)

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

Option 2 Pass the id to the url without #.
In your server.js add a route similar to this :

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

And then grab the id, ex. in getInitialProps

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

And handle the modal

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

Answer 2

You can add a hash using the next/router.

Some pages I change the component that renders based on a state string, so to make sure I know which route I'm on (and keep the back button working) I add a state string stage as a hash to the URL when it detects a change.

React.useEffect(() => {
  router.push(`/booking#${stage}`)
}, [stage])

This will only work client side though.