fridays / next-routes

Universal dynamic routes for Next.js
MIT License
2.47k stars 230 forks source link

Pass param but don't show in url #288

Closed AWR14 closed 1 year ago

AWR14 commented 5 years ago

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

codeninja commented 5 years ago

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.

gaurav5430 commented 3 years ago

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