Skip to content
Permalink
13 contributors

Users who have contributed to this file

@timdorr @pshrmn @mjackson @hmmChase @amZotti @alaboudi @smashercosmo @ryanflorence @gcangussu @dhruvdutt @denis-sokolov @danielberndt
99 lines (68 sloc) 2.45 KB

<Link>

Provides declarative, accessible navigation around your application.

<Link to="/about">About</Link>

to: string

A string representation of the Link location, created by concatenating the location's pathname, search, and hash properties.

<Link to="/courses?sort=name" />

to: object

An object that can have any of the following properties:

  • pathname: A string representing the path to link to.
  • search: A string representation of query parameters.
  • hash: A hash to put in the URL, e.g. #a-hash.
  • state: State to persist to the location.
<Link
  to={{
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state: { fromDashboard: true }
  }}
/>

to: func

A function to which current location is passed as an argument and which should return location representation as a string or as an object

<Link to={location => ({ ...location, pathname: "/courses" })} />
<Link to={location => `${location.pathname}?sort=name`} />

replace: bool

When true, clicking the link will replace the current entry in the history stack instead of adding a new one.

<Link to="/courses" replace />

innerRef: func

As of React Router 5.1, if you are using React 16 you should not need this prop because we forward the ref to the underlying <a>. Use a normal ref instead.

Allows access to the underlying ref of the component.

<Link
  to="/"
  innerRef={node => {
    // `node` refers to the mounted DOM element
    // or null when unmounted
  }}
/>

innerRef: RefObject

As of React Router 5.1, if you are using React 16 you should not need this prop because we forward the ref to the underlying <a>. Use a normal ref instead.

Get the underlying ref of the component using React.createRef.

let anchorRef = React.createRef()

<Link to="/" innerRef={anchorRef} />

component: React.Component

If you would like utilize your own navigation component, you can simply do so by passing it through the component prop.

const FancyLink = React.forwardRef((props, ref) => (
  <a ref={ref} {...props}>💅 {props.children}</a>
))

<Link to="/" component={FancyLink} />

others

You can also pass props you'd like to be on the <a> such as a title, id, className, etc.

You can’t perform that action at this time.