CODEWITHSUNDEEP
javascriptreactjsreact-routerurl-routingstate
connected_user
connected_user

Reputation: 936

React.js w/ react-router: Should my components 'react' to the changes in url or vice versa?

My question is more about high-level design decisions regarding my app's routing, and the subsequent components that get rendered.

My app has multiple "pages" / "sections". Navigating to these sections can be handled simply with basic routing. One of these sections is a 'lookbook' and has a photofeed like that of Instagram (the route is "/lookbook"). If I were to click on a photo in this photofeed I want a modal to appear with the expanded photo with some extra data.

My question boils down to what should happen on the onClick event of one of these photos in the feed. (This very specific functionality is the source of my question because I believe it will determine how I should design how the component acts.)

In the onClick event, does it make more sense to:

A) Simply navigate to a route, something like "/lookbook/photoId". And then have the parent Lookbook component sense the URL change and then just serve what I want.

or

B) Change the state of the Lookbook component in a way that expands the clicked photo inside a modal (No URL change).

Upvotes: 2

Views: 135

Answers (2)

Vaibhav Singh
Vaibhav Singh

Reputation: 942

Thinking in react, you should pass callback function to your feed component and on clicking the feed image change the state of the lookback component using callback function. This is the react approach, now all depends on you whether the state change denotes URL change or modal state change.

Upvotes: 0

Amoolya S Kumar
Amoolya S Kumar

Reputation: 1468

The answer to this question almost entirely depends on how you like to think of the problem.

A has definite advantages. It is cleaner, probably easier to code and would be my first choice. Each photo would direct you to a different URL based on the ID and a separate component altogether would cater to it.

B on the other hand would make your photoID part of the parent component(index page's) state. Depending on this state, you could create your modal. This would make your component a little more complicated than A, but here, you have just one component doing the whole job, and division of responsibility between your components is clear.

Either way is absolutely right and it depends on how you think of your components and the objective served by each of them.

Upvotes: 1

Related Questions