Ionic React - set navigations based on a parameters

Question

I need to handle the navigation based on a parameter with a button click event. In ionic angular I can easily do it like

 setNavigation(param:string,url:string)
  {

    let navigationExtras: NavigationExtras = {
      queryParams: {
          type: param
      }
    };
    
    this.navCtrl.navigateForward([url],navigationExtras);
  }



goNextPage()
  {
      this.setNavigation('param1','nexthome');
                        // parameter , url 
  }

How can i achieve same thing when I'm using Ionic React ?

Simply my need is to navigate from one page to another based on a parameter

can you be more specific? providing an angular example is a good start... are you asking how to pass a parameter when using react-router? — Aaron Saunders, Mar 27 '22 at 22:49
@AaronSaunders yes I learned lot of things from your tutorials as well.But in this case i really need to do same thing as above. Pass a parameter with react router and get that parameter in next page.Then navigate based on that parameter — LVW23, Mar 29 '22 at 05:23

score 0 · Answer 1 · answered Mar 31 '22 at 11:51

Ionic React doesn't provide any tools for this out of the box, but you can easily use one of the many React query string libraries.

For example, I wanted to parse URLs like this:

myapp.com/edit/123?&dest=review

For example, in my router, I added a route like this:

<Route exact path={`edit/:articleId`}>
  <ArticleEdit />
</Route>

And then in the ArticleEdit component, I parse the query string:

  import { useParams } from 'react-router';
  import queryString from 'query-string';

  const { articleId } = useParams<{ articleId: string }>();

  const parsedQueryString = queryString.parse(window.location.search);
  const { dest } = parsedQueryString;

Hopefully this gives you some idea of how you can accomplish what you want.

Ionic React - set navigations based on a parameters

1 Answers1