CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-navigationreact-router-dom
Marcos Guerrero
Marcos Guerrero

Reputation: 388

Passing multiple params in react-router-dom like reactnavigation

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...

Upvotes: 0

Views: 3305

Answers (1)

Serial Geeker
Serial Geeker

Reputation: 69

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 !

Upvotes: 1

Related Questions