Material-ui: Button with href does not work nicely with react-router

[gnapse]

Description

react-router provides its own <Link /> component to render links that navigate within the app, so that they actually go through the router and page switches work as expected.

In the next branch, the button component has a way to generate a <a> link when the href property is provided. However the generated link does not go through the router, therefore instead of navigating as expected in a single-page application, it performs a round-trip to the server and a page-reload instead.

Versions

• Material-UI: next
• React: 15.5.4
• React Router: 4.1.1

Images & references

https://reacttraining.com/react-router/web/example/basic

[oliviertassinari]

Use the component property instead. We have an example right in the documentation:

          <Button
            component={Link}
            className={classes.button}
            raised
            to="/getting-started/installation"
          >
            {'Get Started'}
          </Button>

But please submit support requests and questions to StackOverflow using the tag material-ui. StackOverflow is better suited for this kind of support. The issue tracker is for bug reports and feature discussions. See also our CONTRIBUTING guidelines.

[gnapse]

Thanks. I know about StackOverflow but I genuinely thought this was not supported and was reporting it as a feature request. I did not know about these /docs/ examples. I'll take better care next time before reporting these kind of things here.

[oliviertassinari]

Makes sense 👍 .

[rgilling]

I came upon this issue searching out how to link a button. Tried the solution, it works, but causes a Typescript compilation error in my environment, which is based on Typescript. Error is because property to is not defined on the Button props Is there a way to modify the declaration dynamically? I tried just redeclaring ButtonProps, but it didn't work...

[mtford90]

Having the same issue as @rgilling - this new way of doing things doesn't play nicely with Typescript sadly.

[mtford90]

FYI @rgilling I was able to work around this with a rather ugly change:

<Button color="contrast" component={Link} {...{to: "login"} as any}>
    Login
</Button>

[mtford90]

And here's a nicer way around the Typescript compilation issues that combines Button with Link whilst maintaining typing.

import Button, {ButtonProps} from "material-ui/Button";
import * as React from "react";
import {Link, LinkProps} from "react-router-dom";

export default class LinkButton extends React.Component<ButtonProps & LinkProps> {
  public render() {
    return (
      <Button component={Link} {...this.props as any}/>
    )
  }
}

[alexanderluna]

I would like to add that when used with a RaisedButton you have to use the containerElement prop:

<RaisedButton
 containerElement={<Link to={`/detail/${detail.id}`}/>}
 label="Read More"
 secondary={true}
 fullWidth={true}
 />

[gnapse]

RaisedButton is from the old version of this library. This is now achieved with <Button raised> and it does not need or even have the containerElement prop.

[rcrichton]

containerElement messed up the css for FlatButton and RaisedButton in my case. This is what I did in the end:

<FlatButton
  label="Register"
  onClick={() => this.props.history.push('/register')}
/>

[hubgit]

TypeScript seems to be happy with this now, with material-ui v4 and Link from react-router-dom v5:

<Button to={'/login'} component={Link}>Sign in</Button>

The current documentation is more complex.