Compose link href from "to" property object with href, query and hash

[marcelmokos]

Link element in ReactRouter comes with "to" property which can have href, query object and hash inside.

I prefer to build a query from an object instead of using string templates.

// desired api
// <Link to={{href?: string, query?: object, hash?: string}}>

// desired input
<Link to={{href: "home", query: {key: "value"}, hash: "hash"}}><a>text</a></Link> 

// desired output 
<a href="/home?key=value#hash">text</a>

[timneutkens]

You can use href and as accordingly:

import Link from 'next/link'

<Link href={{href: "home", query: {key: "value"}, hash: "hash"}}>
  <a>text</a>
</Link>

Both href and as accept a url object or string.

import Link from 'next/link'

const urlObject = {href: "home", query: {key: "value"}, hash: "hash"}
<Link href={urlObject} as={urlObject}>
  <a>text</a>
</Link>

If you're using dynamic routes href is the path in the pages directory:

// Will link to /blog/hello-world#hash
import Link from 'next/link'

const urlObject = {href: "/blog/hello-world", hash: "hash"}
<Link href={'/blog/[slug]'} as={urlObject}>
  <a>text</a>
</Link>