React.JS pass state to link, props.location.state is undefined

Question

I am passing a state to the Link component and trying to access the state using props.location.satate. Unfortunately, the state is undefined. I have tried to send the state from the to attribute using the pathname and state, still undefined.

<Route exact path="/private/orders" name="Orders" component={PrivateOrders} />

Private orders

import React from 'react'

const PrivateOrders = (props) => {
    console.log(props)
    return (
        <div>
            <h1>Orders</h1>
        </div>
    )
}

export default PrivateOrders

Link

<Link  
   to="private/orders"
   state={{
      x: "y",
      y: "y",
      z: "y",
      i: "y",
   >
      <CButton color="primary">Order Now</CButton>
</Link>

result

location: {pathname: '/private/orders', search: '', hash: '', state: undefined, key: 'lt9bpr'}

does this answer your question: https://stackoverflow.com/questions/27864720/react-router-pass-props-to-handler-component ? — I am L, Nov 22 '21 at 11:52
You appear to mixing up the component APIs, can you confirm which version of `react-router-dom` you have installed? From your project directory run `npm list react-router-dom`. — Drew Reese, Nov 22 '21 at 16:34
I see. Follow the "Using react-router-dom v5" link instructions from this [answer](https://stackoverflow.com/a/59701168/8690857). — Drew Reese, Nov 23 '21 at 17:53

Shreevathsa Chatra · Accepted Answer · 2021-11-22T12:01:02.750

1

Pass routeProps in Route like this.

edited Nov 22 '21 at 12:01

answered Nov 22 '21 at 11:53

Shreevathsa Chatra

26
3

same undefined state, it should be {...routeProps} – Andrei Nov 22 '21 at 11:55
The `component` prop of a `Route`is supposed to take a component reference, not an anonymous React function. Use the `render` prop for this. See https://v5.reactrouter.com/web/api/Route/component – Drew Reese Nov 22 '21 at 16:37

React.JS pass state to link, props.location.state is undefined

1 Answers1