How to use Button with Link from react-router-dom?

Hello @couds and team 😃

It’s not allow in documentation, but still huge important thing — how to use Button component from react-bulma-components with Link from react-router-dom?

For example:

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

import Columns from 'react-bulma-components/lib/components/columns';
import Heading from 'react-bulma-components/lib/components/heading';
import Button from 'react-bulma-components/lib/components/button';

class Navigation extends Component {
  render () {
    return (
      <Columns className="has-vertical-centered is-mobile" multiline>
        <Columns.Column>
          <div className="field is-grouped is-pulled-right">
            <p className="control">
              <Link to="/account">
                <Button color="white" className="is-rounded">
                  <span>My Account</span>
                </Button>
              </Link>
            </p>
          </div>
        </Columns.Column>
      </Columns>
    );
  }
}

export default Navigation;

And generated html code is:

<div className="has-vertical-centered is-mobile columns is-multiline">
  <div className="column">
    <div className="field is-grouped is-pulled-right">
      <p className="control">
        <a href="/account">
          <a tabIndex="0" className="is-rounded is-white button">
            <span>My Account</span>
          </a>
        </a>
      </p>
  </div>
</div>

I mean one <a> tag into another <a> tag — it’s strange and not valid. Okay, I can use renderAs props for Button to change tag to, for example, <span>. But if I do that, I get this error message in Chrome console:

Warning: Failed prop type: Invalid prop `renderAs` supplied to `Button`.
    in Button (at Navigation.js:19)
    in Navigation (at LandingIndex.js:12)
    in div (at LandingIndex.js:11)
    in div (at LandingIndex.js:10)
    in div (at LandingIndex.js:9)
    in LandingIndex (created by Route)
    in Route (at index.js:18)
    in Switch (at index.js:17)
    in Router (created by BrowserRouter)
    in BrowserRouter (at index.js:16)

How can I work via react-router-dom in right valid way? Please help 😉

P.S. and one more question… what component may help me to replace this CSS classes to components: field is-grouped and its options, like is-pulled-right (or center/left)?

[LaRuaNa]

Hi @koddr, actually that should work that way. Maybe try to render as button. Honestly i dont understand the Warning at Navigation.js:19. There is no renderAs prop and it should be as default a Here an example of a project of mine:

<Link to="/login">
  <Button renderAs="button">
    <span>Login</span>
  </Button>
</Link>

edit: Sorry @koddr, i see it now… Button component accepts only button, a or func. So check to docs here

[paustria]

I’m using this.

<Link to='/somewhere'>
    <Button>
          My button linked to react-router-dom
    </Button>
</Link>