Passing multiple params in react-router-dom like reactnavigation

Question

Well, I'll get to the point with this, and I have a problem passing parameters to the browsing history For those with experience in reactnavication, you will know how easy it is to pass multiple parameters in the form of an object.

now the problem I have is that the following block

goToChat = (chat) =>
  const { params } = this.props.route;
  const post = params && params.post ? params.post : ""
  const anotherParam = params && params.anotherParams ? params.anotherParams : ""
  ...
  if (chat) {
    this.props.navigation.navigate(CHAT_ROUTE, { chat, param, anotherParam, ... })
  } else {
    ...
  }
}

I have to make it work in a history.push with React-router-dom, but I haven't found a way to do it this is what i improvised

goToChat = (chat) =>
  const { params } = this.props.match;
  const post = params && params.post ? params.post : ""
  const anotherParam = params && params.anotherParams ? params.anotherParams : ""
  ...
  if (chat) {
    this.props.history.push(`${CHAT_ROUTE}/${chat}/, post, anotherParam, ... }`)
  } else {
    ...
  }
}

I'm not sure if I'm close to finding the solution with that attempt but, i need find a solution for this problem...

ok, do you have a solution for this problem? any suggestion is good... — Marcos Guerrero
– Marcos Guerrero, Commented Jan 24, 2022 at 19:10

Rik · Accepted Answer · 2022-04-20 13:24:04Z

1

Yes of course you can pass multiple params !

First you need that :

import { useNavigate, useLocation } from "react-router-dom";

And after for example :

  let history = useNavigate();

  const yourEventCliked = (object1, object2) => {
   history("/Your URL to redirect/", {
    state: { param1: object1, param2: object2},
    });
  };

The goal here is to define state and give to it the params... very simple :)

Hope it helped !

edited Apr 20, 2022 at 13:24

Rik

3,9572 gold badges28 silver badges35 bronze badges

answered Apr 16, 2022 at 8:16

Serial Geeker

798 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Passing multiple params in react-router-dom like reactnavigation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related