Passing data to popup (React+Framework7)

Questions
1

I’m currently using Meteor+react

My problem is I have two components

  1. HomePage
  2. PopupPage

in HomePage
const hello = {
title: “Popup page”,
};

1.                  <Link
2.                  onClick={() =>
3.                      this.$f7router.navigate("/popup/", {
4.                           context: { title: "this is title from context" }
5.                      }) }
6.                       popupOpen="#openPopupId"
7.                       routeProps={hello}
8.                     >
9.                       Popup
10.         </Link>

I’m trying to send data via routeProps and accessing in PopupPage Component

List item

in PopupPage
I tried to print the title
{this.props.title}
It’s not getting printed (even though it’s there is props)

and also if anyone know how to create routable popups, Please let me know.

Please help me out this.

Thank you.

2

There is no sense to pass routeProps if you use own navigate method, then it should be:

this.$f7router.navigate("/popup/", {
  context: { title: "this is title from context" },
  props: hello,
})
3

routeProps and your suggestion works fine… I am getting passed data in popup component… but rendering it in popup is not happening.

Do I need to do anything onPopupOpen?

4

I was wrongly created router for popup.
after reading this I understood - https://blog.framework7.io/mastering-v2-router-958ea2dbd24f

Now it is working fine.

Previous
{
path: “/popup/”,
component: PopupComponent,
},

Now
{
path: “/popup/”,
popup: {
component: PopupComponent,
}
},