I'm trying to use hooks in this function, but first I need to convert this class component into a function. I'm struggling to understand how render methods and constructors work in functions and could use some help understanding.
Class function that I'm trying to convert:
class MainSwitchNavigator extends Component { constructor(props) { super(props); const { location, history } = this.props; this.previousLocation = location; navigator.setTopHistory(history); } render() { const { classes } = this.props; return (<main><div className={classes.container}><Switch><Route path="/" exact component={OnboardingScreen} /><Route path="/consent" component={ConsentScreen} /><Route path="/privacy-policy" component={PrivacyPolicyScreen} /><Route path="/term-service" component={TermOfServiceScreen} /><Route path="/sign-in" component={SignInScreen} /><Route path="/sign-up" component={SignUpScreen} /><Route path="/send-code" component={SendCodeScreen} /><Route path="/verify-code" component={VerifyCodeScreen} /><Route path="/new-password" component={NewPasswordScreen} /><Route path="/home" component={MasterContainer} /><Route path="/covid-testing-consent" component={CovidTestingConsentScreen} /><Route component={NoMatch} /></Switch><ToastContainer /></div></main> ); }}const NoMatch = ({ location }) => (<div><h3>Page not found</h3></div>);export default withStyles(styles)(MainSwitchNavigator);