CODEWITHSUNDEEP
reactjshyperlink
Kasper Gantzhorn
Kasper Gantzhorn

Reputation: 201

Difference between Button and Link in React

I want to convert my <button> to a <Link>. But I keep getting an error. 

Warning: Failed prop type: Invalid prop `to` supplied to `Link`.

My code looks like this.

import React from 'react';
import { Link } from 'react-router-dom';
import { auth } from '../firebase';

const SignOutButton = () =>
<button
  type="button"
  onClick={auth.doSignOut}
>
  Sign Out
</button>

export default SignOutButton

I want something like this

import React from 'react';
import { Link } from 'react-router-dom';
import { auth } from '../firebase';

const SignOutButton = () =>
<Link
  to={auth.doSignOut}
>
  Sign Out
</Link>

export default SignOutButton

Because the styling of the Link is different and just to know why it does not work.

Upvotes: 1

Views: 1893

Answers (1)

ᴘᴀɴᴀʏɪᴏᴛɪs
ᴘᴀɴᴀʏɪᴏᴛɪs

Reputation: 7519

<Link> (from react-router-dom) takes to as either a string which is the path that your users get redirected to when they click the link

to: string

A string representation of the location to link to, created by concatenating the location’s pathname, search, and hash properties.

Or an object with:

to: object

An object that can have any of the following properties:

pathname: A string representing the path to link to.

search: A string represenation of query parameters.

hash: A hash to put in the URL, e.g. #a-hash.

state: State to persist to the location.

You are passing it auth.doSignOut which I'm guessing is a function, which in turn causes the prop validation to fail.

Perhaps instead of a router link you are just looking for an a tag?

<a onClick={auth.doSignOut}>Sign Out</a>

Upvotes: 1

Related Questions