Use routing in React functional components

Hi there! Since there is a common trend to use functional components with the power of react hooks and getting rid of class components, I’m trying to build the whole app with the react framework7 client with functional components but I have stumbled upon how to make programmatical routing. Any idea of how can i achieve this? Furthermore, I really need it to check auth and redirect users to login page on app initialization. Any help is welcome!
Kind regards

Page (Router) components accept f7router and f7route as component props:

import React from 'react';
import { Page } from 'framework7-react';

export default ({ f7router }) => {
  return (
    <Page>
      ...
      <button onClick={() => f7router.navigate('/about/')}>Go to about</button>
    </Page>
  )
}
1 Like

It works! Thank you so much!!

I tried the same but it’s working at all. I am getting the following error

import React from 'react';
import { Page } from 'framework7-react';

export default ({ f7router }) => {
  return (
    <Page>
      ...
      <button onClick={() => f7router.navigate('/about/')}>Go to about</button>
    </Page>
  )
}

1 Like

Did you solved this problem??