How to navigate page and pass through props from within a function (React)

Question

I have used Link and react Router dom to navigate and pass props.

Here is my function

 pageRelocator(mssg) {
    window.localStorage.removeItem("mssg");
    if (mssg.length < 35) {
      window.location.href = "http://localhost:3000/completed-assessment";
    } else if (mssg.length > 35) {
      window.localStorage.setItem("mssg", mssg);
      window.location.href = `http://localhost:3000/user-questions`;
    }
  }

I would like to conditionally navigate to a page and pass the prop mssg through.

I am fully aware how to do this through redirect/ Link etc but my understanding is that this is done within the jsx how would I navigate AND pass props through to a page doing it in this manner.

its help you https://stackoverflow.com/questions/44121069/how-to-pass-params-with-history-push-link-redirect-in-react-router-v4 — prasanth, Mar 17 '20 at 17:28

score 2 · Answer 1 · answered Mar 17 '20 at 20:41

2

Something simple like this?

const pushPayload = mssg.length > 35 ? {
  pathname: '/user-questions',
  state: { mssg },
} : {
  pathname: '/completed-assessment'
};

history.push(pushPayload);

On '/user-questions' route access the passed state (using guards if appropriate) off the history prop/object:

history.location.state.mssg

answered Mar 17 '20 at 20:41

Drew Reese

165,259
14
153
181

Thanks I will give this a go later – henry pf Mar 18 '20 at 10:26

How to navigate page and pass through props from within a function (React)

1 Answers1