0

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

Yuvi
  • 528
  • 8
  • 18

2 Answers2

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");
};
Axnyff
  • 9,213
  • 4
  • 33
  • 37
  • Thank you for your input. I did know about the useHistory and useLocation hooks but I was trying to achieve it by this way which was incorrect as you pointed out. – Yuvi Jul 25 '20 at 21:10
1

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.

goldins
  • 1,306
  • 1
  • 11
  • 14
  • Thank you for your input. I did know about the useHistory and useLocation hooks but I was trying to achieve it by this way which was incorrect as you pointed out. – Yuvi Jul 25 '20 at 21:10