Can hash routes be defined in next.js?

Question

Can hash routes be defined in next.js?

Previously, I created a modal component using <HashRouter> in react-router where the modal would become active or inactive based on the hash url. For example, the modal is inactive when the url is /route, but becomes active when the url is /route#modal1. Is there any method to define hash routes in next.js?

javascript react-router modal-dialog next.js

Answer 1

Answer №1

When dealing with URLs, it's important to note that the hash symbol portion (which identifies an HTML entity) is not transmitted to the server. This means that you won't be able to match the URL serverside if a browser loads something like /route#modal1 - the server will only see /route. However, there are ways to work around this:

Option 1: Manage modal rendering on the client side using next/router in your component. Here's a sample code snippet assuming you're working with class components:

import Router from 'next/router'

....

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

Option 2: Pass the ID to the URL without the #. In your server.js, add a route similar to the following:

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

Then extract the ID, for example in getInitialProps:

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

You can then handle the modal accordingly:

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

Answer 2

When dealing with URLs, it's important to note that the hash symbol portion (which identifies an HTML entity) is not transmitted to the server. This means that you won't be able to match the URL serverside if a browser loads something like /route#modal1 - the server will only see /route. However, there are ways to work around this:

Option 1: Manage modal rendering on the client side using next/router in your component. Here's a sample code snippet assuming you're working with class components:

import Router from 'next/router'

....

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

Option 2: Pass the ID to the URL without the #. In your server.js, add a route similar to the following:

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

Then extract the ID, for example in getInitialProps:

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

You can then handle the modal accordingly:

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

Answer 3

Answer №2

If you want to achieve this functionality, you can utilize the next/router.

For example, we implement hash routing on a specific page to display different components based on the hash URL. This allows users to navigate back and forth using standard web navigation buttons.

// page.js

export default function MyPage() {
  const router = useRouter();
  const hash = router.asPath.split('#')[1] || '';
  const showModal = hash === 'modal1' ? true : false;
  const openModal = () => {
    router.push({ hash: 'modal1' });
  }  
  return (
    <>
      <h1>MyPage</h1>
      <Button onClick={openModal}>Open Modal 🙂</Button>
      {showModal && <ModalOne />}
    </>
  )
}

// ModalOne.js

export default function ModelOne {
  const router = useRouter();
  const closeModal = () => {
    router.push({ hash: '' });
  }
  return (
    <>
        <h1>Hello Modal</h1>
        <Button onClick={closeModal}>Close Modal 🙃</Button>
    </>
  )
}

Whenever the router hash changes, a re-render occurs, allowing the modal to open similarly to how it would in a single-page application.

This setup also ensures that the modal closes when the user navigates back on a mobile device, aligning with our expected behavior for this scenario.

Please note that I am working with nextjs version 12.1.0

Answer 4

If you want to achieve this functionality, you can utilize the next/router.

For example, we implement hash routing on a specific page to display different components based on the hash URL. This allows users to navigate back and forth using standard web navigation buttons.

// page.js

export default function MyPage() {
  const router = useRouter();
  const hash = router.asPath.split('#')[1] || '';
  const showModal = hash === 'modal1' ? true : false;
  const openModal = () => {
    router.push({ hash: 'modal1' });
  }  
  return (
    <>
      <h1>MyPage</h1>
      <Button onClick={openModal}>Open Modal 🙂</Button>
      {showModal && <ModalOne />}
    </>
  )
}

// ModalOne.js

export default function ModelOne {
  const router = useRouter();
  const closeModal = () => {
    router.push({ hash: '' });
  }
  return (
    <>
        <h1>Hello Modal</h1>
        <Button onClick={closeModal}>Close Modal 🙃</Button>
    </>
  )
}

Whenever the router hash changes, a re-render occurs, allowing the modal to open similarly to how it would in a single-page application.

This setup also ensures that the modal closes when the user navigates back on a mobile device, aligning with our expected behavior for this scenario.

Please note that I am working with nextjs version 12.1.0

Answer 5

Answer №3

To include a hash in the URL, you can utilize the next/router library.

In certain scenarios, I dynamically alter the component being rendered based on a state string. To ensure that I am aware of the current route and maintain functionality of the back button, I append a state string stage as a hash to the URL when a change is detected.

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

Please note that this approach is specifically for client-side operations.

Answer 6

To include a hash in the URL, you can utilize the next/router library.

In certain scenarios, I dynamically alter the component being rendered based on a state string. To ensure that I am aware of the current route and maintain functionality of the back button, I append a state string stage as a hash to the URL when a change is detected.

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

Please note that this approach is specifically for client-side operations.

Can hash routes be defined in next.js?

Answer №1

Answer №2

Answer №3

Similar questions

Tips for using conditional rendering with React and TypeScript

Having difficulty displaying form errors using handlebars

Generate a fresh collection of objects all sharing a common identifier within a given array

Managing the onChange event for a MaterialUI dropdown component

Obtain the dynamic identifier of an element within every block using jQuery in a rails application

yii2: Utilizing the power of dynamic calling in widgets

When utilizing the data property within the useQuery() hook, an error may arise stating "Unable to

Can I use more than one AudioContext at a time?

"Troubleshooting: Why is my AngularJS ng-repeat failing to

Is Angular automatically assigned to `window.angular` on a global level when it is loaded as a CommonJS module?

Switching over from create-react-app to NextJS, encountering difficulties with integrating ThreeJS

Is Immutable state considered a key functional aspect in the ReactJs framework?

No bugs appeared in Next.js

Getting rid of an Ajax loader graphic after a period of time

Can the contents of a JSON file be uploaded using a file upload feature in Angular 6 and read without the need to communicate with an API?

"Once the initial date has been selected, v-Calendar's datepicker allows for setting a

Understanding Mongodb: the process of populating a schema that is referenced within another schema using an API

How to effectively utilize signed requests for AWS S3 when uploading images?

Extracting information from HTML and transferring it to Javascript using jQuery

Adjust the size of the font in your Bootstrap Table