使用 RouterLink 组件反应 MaterialUI 按钮 - 如何传递 Exact 属性？

Question

我有这个代码：

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

问题是 - “exact”属性不起作用 - 我在“/certificates”页面上突出显示了“Certificates”按钮（应该如此），但我在“/certificates/new”页面上突出显示了两个按钮，因为“exact”属性不能正常工作。

如何解决这个问题？ 也许有办法将“精确”属性传递给 RouterLink 组件？

谢谢！

Answer 1

使用 react-router-dom 中的链接而不是按钮进行导航。

npm i react-router-dom

然后将按钮更改为链接而不是您将拥有的按钮

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

和

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

然后

精确的

属性被传递给 BrowseRouter 即

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

假设 Certificate 和 NewCertificate 是您的组件名称。