Question

我正在使用带有类组件的 Material UI makeStyles 并添加使用样式作为道具，同时默认将其导出到箭头函数中。

export default () => {
  const classes = useStyles();

  return (
    <LoginClass classes={classes} />
  )
}

在 React 文档中，它指出在使用 makestyles 时需要使用钩子，目前我一直在正确使用。

我现在面临的问题是我想使用 react withRouter 来使用：

<块引用>

this.props.history.push

我在课堂上没有访问权限。

以下是我的代码，运行良好，但我无法将用户定向到其他页面。

const useStyles = makeStyles((theme) => ({
  paper: {
    marginTop: theme.spacing(8),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: '#009688',
  },
  form: {
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(1),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
    backgroundColor: '#33ab9f',
    '&:hover': {
      backgroundColor: '#009688',
    },
  },
}));

class LoginClass extends React.Component {
  
  handleSubmit(event) {
        this.props.history.push('/home') //dont have access to history unless I use withRouter
                      }
render() {
    const classes = this.props.classes;
    const { input } = this.state
    return (
      <React.Fragment>
        <CssBaseline />
        <MenuBarClass classes={classes} isLogin={this.state.isLogin} />
      </React.Fragment>
   )
  }
}

经过大量研究，我找到了一种将用户引导至其他页面的方法：

export default withRouter(withStyles(useStyles)(LoginClass))

但是使用上面的导出会扭曲我的整个页面设计。

任何使用类和 makeStyles 的解决方案将不胜感激。谢谢你。这样我就可以将用户引导到其他页面。

Answer 1

试试这个方法：

如何在使用材质 UI makeStyles 时默认导出与路由器反应

1 个答案: