clean urls with router.push in nextjs

Question

I have the code below. It redirects to /home and passes a username variable. However, in the address bar, it shows http://localhost:3000/home?username=bobmarley. How can I pass variables using next.js cleanly?

import { withRouter } from 'next/router'
loginUser(this.state.user)
        .then(response => {
          var username = response['username'];

          if (username) {
            this.props.router.push({
              pathname: '/home',
              query: { username: username }
            });
          }
      });

Drew Reese · Accepted Answer · 2021-04-01 03:17:23Z

1

Use the as prop of router.push, this will be what is displayed in the address bar. Set it to the same value used for pathname.

as - Optional decorator for the URL that will be shown in the browser.

this.props.router.push({
  pathname: '/home',
  as: '/home',
  query: { username: username }
});

answered Apr 1, 2021 at 3:17

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Juliette Over a year ago

Hey I did this and I still got the username in my url bar?

Alokesh Bora · Accepted Answer · 2022-03-15 06:03:34Z

0

This is not where you put the as parameter. It should look like

this.props.router.push({
  pathname: '/home',
  query: { username: username }
},
{
pathname: '/masked-url'
});

answered Mar 15, 2022 at 6:03

Alokesh Bora

1

Collectives™ on Stack Overflow

clean urls with router.push in nextjs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related