React Material UI Button with RouterLink Component - 如何传递 Exact 属性？

【问题标题】：React MaterialUI Button with RouterLink Component - how to pass Exact property?React Material UI Button with RouterLink Component - 如何传递 Exact 属性？
【发布时间】：2021-03-16 11:48:04
【问题描述】：

我有这个代码：

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

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

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

谢谢！

【问题讨论】：

标签： javascript reactjs react-router material-ui

【解决方案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 是您的组件名称。

【讨论】：