-
-
Notifications
You must be signed in to change notification settings - Fork 31.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Button with href does not work nicely with react-router #7186
Comments
Use the <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. |
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 |
Makes sense 👍 . |
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 |
Having the same issue as @rgilling - this new way of doing things doesn't play nicely with Typescript sadly. |
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> |
And here's a nicer way around the Typescript compilation issues that combines 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}/>
)
}
} |
I would like to add that when used with a RaisedButton you have to use the
|
|
<FlatButton
label="Register"
onClick={() => this.props.history.push('/register')}
/> |
TypeScript seems to be happy with this now, with material-ui v4 and <Button to={'/login'} component={Link}>Sign in</Button> The current documentation is more complex. |
Great answer! |
How did you find the |
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 thehref
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
Images & references
https://reacttraining.com/react-router/web/example/basic
The text was updated successfully, but these errors were encountered: