React - passing props and using f7router gives f7router error in react

Using React and passing props from router.js to a page .jsx and using f7router gives error:

TypeError: undefined is not an object (evaluating ‘f7route.url’)

I need to be able to read props and use f7router to send users onclick to navigate another page but this error got me stuck!

this code below show props without problem

export default (_) => {
  console.log({_}); //it prints ok

but this code below, create an error in the console using f7router together with props in react

export default (_, {f7route, f7router}) => {
  console.log({_}); //it prints ok

  async function createChatRoom() {
    .... //create chat room and redirect to inbox... 
    f7router.navigate('/view-inbox'), {}; //gives this error below

TypeError: undefined is not an object (evaluating ‘f7route.url’)

Any solution to use f7router in react together with props without having this issue?

thanks for the ideas how to solve it!

SOLVED: I use this code below inside a callback function instead of f7route and now it works!

    f7.views.main.router.navigate('/view-inbox'), {
      reloadCurrent: true,
      ignoreCache: true,