Turn URL Object into URl string

Question

So I have a stringified object in my localStorage,

  const stringifiedURLObject = fromLocalStorage

I tried to JSON.parse that string to normal Url Object. and I want to convert that object into Url string,

  // i want to turn this
  {
    pathname: 'user/[id]'
    query:  {
      mode: 'active'
      id: 'someID'
    }
  }

  // to this
  const normalPathURL = `/user/xxx?mode=active`

Then pass the string to redirect query

  {
    pathname: '/register',
    query: {
      redirect: normalPathURL,
    },
  }

How can i do that?

Do you have any control over the pattern of the param? meaning the bracket syntax. something like a : is a bit cleaner. Regardless I would have a route helper to handle this functionality for you — John Ruddell
– John Ruddell, Commented Oct 29, 2021 at 4:29
@JohnRuddell i dont know. i'm just following this example nextjs.org/docs/api-reference/next/router#with-url-object — Ahwan
– Ahwan, Commented Oct 29, 2021 at 4:41
ok, thats fine. What I would do here is probably create a helper that converts the object to an actual URL so you can do whatever you'd like with it from there — John Ruddell
– John Ruddell, Commented Oct 29, 2021 at 4:43

ABDULLOKH MUKHAMMADJONOV · Accepted Answer · 2021-10-29 04:20:29Z

2

You can do this easily with javascript string templates:

 const parsedObject = {
    pathname: 'user/[id]'
    query:  {
      mode: 'active'
      id: 'someID'
    }
  }

  // to this
  // parsedObject.pathname.split('/')[0] extracts first part of pathname  
  const normalPathURL = `/${parsedObject.pathname.split('/')[0]}/${parsedObject.query.id}?mode=${parsedObject.query.mode}`

answered Oct 29, 2021 at 4:20

ABDULLOKH MUKHAMMADJONOV

5,3946 gold badges28 silver badges51 bronze badges

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

1 Comment

Ahwan Over a year ago

thank you. i'm thinking the same way. i just wondering if there is another way

Jacob Eggers · Accepted Answer · 2023-05-26 15:20:09Z

1

As an update, there's a solution here:

https://github.com/vercel/next.js/discussions/22025

import Router from 'next/router';
import { resolveHref } from 'next/dist/shared/lib/router/router';
// for next 13
// import { resolveHref } from 'next/dist/shared/lib/router/utils/resolve-href'

const exampleRoute = {
    pathname: '/work/[slug]',
    query: { 
        slug: 'project-foo',
    },
};
const [, resolvedAs] = resolveHref(Router, exampleRoute, true);
//       ^-- resulting path as a string

NOTE: when I tested the return type was defined as string for ``resolveHref, but it actually returned string[], so I had to cast it as any

answered May 26, 2023 at 15:20

Jacob Eggers

9,3282 gold badges27 silver badges43 bronze badges

Collectives™ on Stack Overflow

Turn URL Object into URl string

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