React MaterialUI Button with RouterLink Component - how to pass Exact property?

Question

I have this code:

<Button
  activeClassName={classes.active}
  className={classes.button}
  component={RouterLink}
  exact={true}
  to="/app/certificates"
>
  Certificates
</Button>

<Button
  activeClassName={classes.active}
  className={classes.button}
  component={RouterLink}
  exact={true}
  to="/app/certificates/new"
>
  New certificate
</Button>

The thing is - "exact" property is not working - i have "Certificates" button highlighted at "/certificates" page (as it should), but i have BOTH buttons highlighted on "/certificates/new" page because "exact" property not working as it should.

How to fix this? Maybe there is the way to pass "exact" property to RouterLink component?

Thanks!

Answer 1

Use Link from react-router-dom instead of a button to navigate.

npm i react-router-dom

Then change button to Link instead of Button you will have

<Link
  activeClassName={classes.active}
  className={classes.button}
  component={RouterLink}
  exact={true}
  to="/app/certificates"
>
  Certificates
</Link>

and

<Link
  activeClassName={classes.active}
  className={classes.button}
  component={RouterLink}
  exact={true}
  to="/app/certificates/new"
>
  New certificate
</Link>

And then the

exact

property is passed to the BrowseRouter ie

<Switch>
  <BrowserRouter path="/app/certificates" exact component={Certificates}/>
  <BrowserRouter path="/app/certificates/new" component={NewCertificate}/>
<Switch/>

Assuming Certificate and NewCertificate are you components names.