fridays / next-routes

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

Supported for using named routes on target _blank #26

Closed khankuan closed 7 years ago

khankuan commented 7 years ago

Hi, I would like to use the route resolution logic here for links that open in a new tab. Unfortunately, next.js does not support the target property anchor tag: https://github.com/zeit/next.js/pull/1736, hence we are only able to do the resolution here. Do you think this is a common use case or should I be writing a Link component that somehow uses this?

Cheers!

HaNdTriX commented 7 years ago

I thought about this PR quite awhile. Nevertheless I believe this will break the scope of this lib. But don't worry it is really easy to create your own component that solves this issue.

Some next-routes methods are publicly available but are not documented, yet.

API

<router>.findByName(<routeName>) => <RouteObject>
<RouteObject>.getAs(<props>)

Example Component

import React from 'react'
import PropTypes from 'prop-types'
import router from '../routes'

const ExternalLink = ({ route, params = {}, ...otherProps }) => {
  const path = router.findByName(route).getAs(params)
  return (
    <a href={path} {...otherProps} />
  )
}

ExternalLink.propTypes = {
  route: PropTypes.string,
  params: PropTypes.object
}

export default ExternalLink

Usage

<ExternalLink route='post' params={{id: 1}} target='_blank'>Click Me!</ExternalLink>