next-routes icon indicating copy to clipboard operation
next-routes copied to clipboard

Pass param but don't show in url

Open AWR14 opened this issue 6 years ago • 2 comments

I have the following

routes.js

const nextRoutes = require('next-routes')
const routes = (module.exports = nextRoutes())

routes.add('product', '/collection/:handle/:url')

Item.js

return (
      <ItemStyles>
        <img src={item.images.edges[0].node.originalSrc} />
        <Title>
        <Link route='product' params={{ handle: handle, url: url, id: item.id }}>
            <a>{item.title}</a>
          </Link>
        </Title>
        <PriceTag>£{item.variants.edges[0].node.price}</PriceTag>
      </ItemStyles>
    );

I want to pass the item.id as i need it on the product page to do some calls. however i don't want it to show in the url

currently its showing as 'localhost:3000/collection/speakers/Lotsen-Small-and-capable?id=Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzE1NDcxMTcxOTkzOTU%3D'

and i want 'localhost:3000/collection/speakers/Lotsen-Small-and-capable'

Thanks

AWR14 avatar Feb 22 '19 10:02 AWR14

The best way to do this is to not do it to begin with... you're passing what I would assume should be a unique slug for your product... index it in your DB up to 50 characters and then do the look up based on the slug (or :url in your case).

If this ID is something that gets passed to every link, then save it in the session or local storage.

If you REALLY want to hide the ID and it has to follow the user's click,.. then a pre-processing hook to save the ID in local storage would be the easiest way to obscure (slightly) the ID from they user.

TL;DR: What you are trying to do goes against the semantics of how links work and how data flows.

codeninja avatar Apr 28 '19 04:04 codeninja

i think this is a valid use case, and can be used to achieve something similar to the state that react router supports. i want to attach some state to the route while navigating, and do not want it to show up in the url.

something similar is discussed here and seems directly possible with nextjs Link, but wouldn't be possible with the next-routes link as we don't control the creation of href and as https://github.com/vercel/next.js/discussions/23991

gaurav5430 avatar Jun 12 '21 04:06 gaurav5430