React js Material ui Typography

Question

我有一个排版，当我悬停时，我希望光标看起来像一个按钮， 我如何将我的浏览器路由器路由添加到此单击中？

<Grid  item lg={12} md={12} sm={12} xs={12} >   
<Typography noWrap className={classes.labelForgot} variant="subtitle2">
Forgot password
</Typography>
</Grid>

我的路线应用程序：

<BrowserRouter>
<div>
<Header/>
<Navigation/>
<Container maxWidth="lg" >
<Switch>
<Route path="/" component={LandingPage} exact={true} /> 
<Route path="/xd" component={AuthPage} exact={true} /> 
<Route component={NotFoundPage} />
</Switch>
</Container>
</div> 
</BrowserRouter>

Answer 1

最好的方法是将 CSS 样式属性添加到您的类中。 那看起来像：

.labelForgot { cursor: pointer; }

然后，要使其链接到URL，您需要对无状态组件使用useHistory((或为类导出withRouter((。在这种情况下，您可以访问历史记录并以 history.push('/url'( 的形式推送到它。(https://reacttraining.com/react-router/web/api/Hooks/usehistory(

如果您使用一个类，则将其导出为export default withRouter(MyClass)然后您可以从 props 访问历史记录this.props.history.push('/url')

或者你可以使用react-router包中的<Link />，并将它们样式设置为看起来像你的排版