How do I pass data through a react route-CodePudding

I need this route to pass some more data to the CreateRoom component Can someone help me with the syntax

<Route path="/" component={CreateRoom} />

CodePudding user response：

you should use Link to send it

<Link to={{ pathname: "/CreateRoom", state: data }} >

and then receive it with

 props.location.state

CodePudding user response：

You can also pass data using history and access it on that component.

props.history.push({
         pathname:"/CreateRoom",
         state:{
             userId:"1"
             ...
          }
 });

You can access like props.location.state.userId

CodePudding user response：

You can simply use :

<Route path="/" >
  <CreateRoom data={your data} />
</Route

Or use the Link :

<Link to={{ pathname: "/", state: data }} >

and then receive it in your CreateRoom with

const location = useLocation(); 
const data = location?.state;

CodePudding user response：

The correct solution using hooks in this case would be passing the state from wherever you link towards the Route specified above and using the useLocation hook inside the CreateRoom component to access the state.

However you will need to pass the prop from every place you link towards this route if you want to access it.

eg.:

<Link to={{pathname: "/", state = data }} />

Or using history.push:

const RandomComponent = (props) => {
    const history = useHistory();

    const forwardToPage = () => {
        history.push({ pathname: "/", state: data})
    }
}

And in your CreateRoom component:

const CreateRoom = (props) => {
   const location = useLocation(); //This is imported from react-router-dom
   
   const data = location?.state;

   return(...)

}