How do i pass the props to another component via react router?

Question

I have a component which displays a list of FM stations. I want to pass the data to individual component because most of the data is already present. However, I am not able to redirect the page to individual FM page upon the click of the button called Click me.

I have used different sources on stackoverflow and other links such as react router difference between component and render https://medium.com/@cristi.nord/props-and-how-to-pass-props-to-components-in-react-part-4-2cc375c17a23

They all point that I am following the docs correctly and now I am not sure how I can resolve this. I understand that I can use the router hooks to resolve this issue, but I am trying to learn why I am not being to resolve it like this.

Sandbox

Answer 1

React-Router is meant to conditionally render component depending on the url you're in.

To do this you declare the Route like this:

<Switch>
    <Route path="/some-url">
        <MyComponent />
    </Route>
     <Route path="/some-other-url">
        <MyComponent />
    </Route>
<Switch>

You can then either use a <Link> to redirect to specific url or do this:

const history = useHistory();
const onClick = () => {
    history.push("/some-other-url");
};

Answer 2

Your onClick is returning a Route component. Instead, you should have this component already rendered, and either render a Redirect component , call history.push , or simply use a Link component.