Sending 'props' to a 'stacked page'

1

Hi all and @nolimits4web,

Is it possible to send some data via options.props in router.navigate() to a stacked page? I am aware that I can send the data via the URL, but I prefer to hide the data and now show it. Here is the code:

app.views.main.router.navigate('/verify/', {
  props: {
    userMobile,
  },
});

But when I try to receive it as app.view.main.router.currentRoute.props, it is not defined. Any help would be appreciated.
TIA

2

You can use the store for this, if you need help with it let me know. I was trying to do something like that myself, I ended up using the store since you are more freely to do anything you want in the long run.

3

Thank you @Travis_Antonio for your suggestion. In this specific use case, a store seems an overkill, as I just want to pass some data to a route; there is exactly one place that I need this, but I will use that in my next projects.

For the time being, I modified my navigate wrapper as:

// Navigate to given page
export const navigate = (url, options) => {
  setTimeout(() => {
    if (options && options.props) {
      const route = app.views.main.router.findMatchingRoute(url); // Undocumented; found by checking router.navigate() source code
      if (route) {
        route.route.props = options.props;
      }
    }
    app.views.main.router.navigate(url, options);
  }, 0);
};

Maybe you or @nolimits4web can tell me your opinion about this. I know findMatchingRoute() is undocumented, but this did exactly what I expected.

4

I am not aware of the “props” property. I always use “context”, could you try this as well?

5

Isn’t context for components only? Does it work for normal routes as well? If so, can you please give me an example?

6

You can try doing it like this, (if you need further help I have discord, my discord is: vennetto#1441 )

 $f7router.navigate(
        {
            name: 'ordersclient_m', # [ where this is the route you want to go to ]
        },
       {
            props:{scid: value}, #[ the Object you want to send]
        }
);
7

Great! And how do you get that scid: value then?

8

Here is a live example: funny-thompson-l2v5d - CodeSandbox

9

Thank you Travis for your example. I was wondering if this is possible without using a component, i.e. a simple static route. Anyway, thanks again!

10

Can you do show us a live example as to what you mean with simple static route or at least a piece of code of it.

11

Something like this:

  routes: [
    {
      path: '/main/',
      pageName: 'main',
      on: {
        pageInit: () => {
          ...
        },
      },
    },
    ...
  },

In index.html we have:

      ...
      <div class="page stacked" data-name="main">
        <div class="page-content">
          ...
        </div>
      </div>
12

I think you should use componentUrl for this case scenario because otherwise you would have to complicate things a little from my point of view, maybe if someone has a better solution, however, the one I see is to use a component in order to pass props and use them.

13

Very helpful, thanks guys for this!