Home > Software design >  In React router dom can i pass a props in a Link?
In React router dom can i pass a props in a Link?

Time:09-27

in React router dom can i pass a props in a Link?

Is there a way that i can pass props into Link then just the component?

I'm trying to pass props inside a Link like this.

function App(){
    const test = "Hello"
    return(
        <Link to="/detail" test={test}> detail </Link>
    )
}

In my detail component i can call like this.

function detail(){
return(
    <p>{test}</p>
    )   
}

I'm sorry if this example is very hard to understand, I don't know how to give proper example.

CodePudding user response:

Using state prop you can as - Docs ref V5

function App(){
    const test = "Hello"
    return(
        <Link to= {{ pathname : "/detail",  state: { test: "dummy"} }}> detail </Link>
    )
}

and get the value using useLocation hook

In my detail component I can call like this.

function detail(){
const {state} = useLocation();
return(
    <p>{state.test}</p>
    )   
}
  • Related