Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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>
          <div className="field is-grouped is-pulled-right">
            <p className="control">
              <Link to="/account">
                <Button color="white" className="is-rounded">
                  <span>My Account</span>

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>

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)?

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:18 (6 by maintainers)

github_iconTop GitHub Comments

LaRuaNacommented, Jun 25, 2018

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">

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

paustriacommented, Jan 1, 2020

I’m using this.

<Link to='/somewhere'>
          My button linked to react-router-dom
Read more comments on GitHub >

github_iconTop Results From Across the Web

Wrapping a react-router Link in an html button - Stack Overflow
LinkButton component ; import { useNavigate } from ; 'react-router-dom' function ; MyLinkButton() ; const navigate = useNavigate ; return ( <button ......
Read more >
How to use a Button as a Link in React | bobbyhadz
To use a button as a link in React, wrap the button in an <a> tag or a Link component if using react...
Read more >
How to use a Button component as a link in React
To correctly use a Button component as a link in React, we need to override the underlying button HTML tag of the component...
Read more >
Adding a Link to a Bootstrap Button with React Router
While working on my React based portfolio website recently, I ran into an issue regarding buttons and links. I had designed a section...
Read more >
How to navigate on path by button click in react router
Approach: To navigate to another page by clicking a button we will be using the useHistory hook. UseHistory hook: This method lets you...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found