score:0

Accepted answer

for getting location's state in functional component without route props or withroute hoc, you would use uselocation instead:

import { usehistory } from "react-router-dom";

const main= () => {
    const location = uselocation();
    console.log(location);
};

and to pass multiple variables through location state, use object:

history.push("/page1", { pathname: "test", anotherparam: "test2" });

note that: the second param of history.push is already the state, so you don't need to name it a state

live example:

edit react router - 404 - navbar condition (forked)

score:1

you may want to try the object version of the push:

function handlesubmit(event) {
  event.preventdefault();
  history.push({
    pathname: "/main",
    state: 'test',
  });
};

please also ensure the receiving component is also receiving route props.

const main= (props) => {
  console.log(props.location.state);
};

if it not then ensure access to the location object via the uselocation hook or the withrouter higher order component to have them injected as props.


Related Query

More Query from same tag