react-router-dom with material-ui

Question

Im using material-ui and react-router-dom in my react (typescript) application

I have tried to use the following tip/help, so that when a user clicks a button (or whatever) he gets redirected to that route. Very basic stuff. When I click on the button, the url is updated in the url-window in my browser, but the correct component is not loaded. I had this working using bootstrap (and 'react-router-bootstrap's NavigationLink), but now Im stuck. Any tips how to get this working

(Im also using Mobx as state handler), Im also happy with any other router, if that makes my life simpler

https://material-ui.com/demos/buttons/ and How to make a Material UI react Button act as a react-router-dom Link?

Note that if I hit enter in the url-window I get routed correctly (to right component)

Ammar Alakkad Ammar Alakkad · Accepted Answer · 2019-02-26T09:44:35

I'm using this method to achieve a correct react-router-dom link for a Button component from material-ui.

Define a LinkComponent

import * as React from 'react';
import { Link } from 'react-router-dom';

export const LinkComponent = (props: any) => {
  return <Link {...props} />;
};

Then you can use it like this:

<Button
  variant={'outlined'}
  color={'primary'}
  component={LinkComponent}
  to={'/'}>
  HomePage
</Button>

If you don't want to create a dedicated component for this purpose, you can use it as a lambda function as a component prop for the <Button>.

react-router-dom with material-ui

1 Answers