[英]React MaterialUI Button with RouterLink Component - how to pass Exact property?
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.问题是 - “exact”属性不起作用 - 我在“/certificates”页面上突出显示了“Certificates”按钮(应该如此),但我在“/certificates/new”页面上突出显示了两个按钮,因为“exact”属性不能正常工作。
How to fix this?如何解决这个问题? Maybe there is the way to pass "exact" property to RouterLink component?也许有办法将“精确”属性传递给 RouterLink 组件?
Thanks!谢谢!
Use Link from react-router-dom instead of a button to navigate.使用 react-router-dom 中的链接而不是按钮进行导航。
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属性被传递给 BrowseRouter 即
<Switch>
<BrowserRouter path="/app/certificates" exact component={Certificates}/>
<BrowserRouter path="/app/certificates/new" component={NewCertificate}/>
<Switch/>
Assuming Certificate and NewCertificate are you components names.假设 Certificate 和 NewCertificate 是您的组件名称。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.