使用 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 是您的組件名稱。