ReactJS : How to read value passed in Link react-router in another functional component

Question

I have followed the suggestion on Pass props in Link react-router

I'm sending Link value to the ReactJS functional component and while accessing it returning empty, I'm sure missing something basic here.

This is my Route path

            <Route path="/report/:id">
                <ReportPage />
            </Route>

The report page which is trying to get value from either query param or state param both returns empty

const ReportPage = (props) => {
    const { query } = useParams();
    const { hello } = useState()

    console.log(query) // Return Empty for Try #2 
    console.log(hello) // Return Empty for Try #1
    console.log(this.props.match.params.hello) // Undefined for 

    return (
        <DashboardLayout>
            <h2> AMI Test Reports </h2>
        </DashboardLayout>
    )
}
                

DashbaordPage which is Linking

Tried 1 Using the state

                   <Link
                    to={{
                        pathname: "/report/1",
                        state: {
                            hello: "Hello World"
                        }
                    }}>
                    Press Me
                </Link>

Tried #2 using the query

                   <Link
                    to={{
                        pathname: "/report/1",
                        query: "test"
                    }}>
                    Press Me
                </Link>

What is the right way to access the Value passed in the Link in another functional component.

Answer 1

useParams returns an object containing all of the available parameters. What you currently have is useParams returning an object that contains a params property which is incorrect.

what you want:

const { id } = useParams();

As for the location state, you'd get that from useLocation, not useState.

const { state } = useLocation()