Question

0

11

Views

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

about 2 months ago ·

Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Loading

Answer 1 · 2022-07-04T16:27:20.375Z

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 !