CODEWITHSUNDEEP
reactjsmaterial-uireact-router-v4
Kyle Pennell
Kyle Pennell

Reputation: 6097

How to change URLs (but not entire view) when clicking on a modal with Material-ui and react-router 4?

I have an app using a material ui List with ListItems.

I want for users to be able to click on a ListItem and have it open a Modal or a Collapse to give more info about the ListItem. I want the view to stay the same (overall), albeit with a new url that links to that Modal or Collapse.

Right now, all I can get is that the user clicks on the ListItem and it opens an entirely new view.

I want to have the ListDetails or ListItem details be shown in a collapse or modal (or some ui that is on that same page) and be linkable (have a url)

Code:

// List
<List>

<Collapse>
<ListItem <Link to={`/listitem/${listitem.id}`}> />
<ListDetail />
</Collapse>
<ListItem />
<Modal><ListDetail /></Modal>

</List>

// Router
<Route path="/list/:id" render={({ match }) => <ListDetail params={match.params} />} />

This goes to an entirely new page. How to wire it up to so that I can show ListDetail within the same page?

How to set up the components/routing to change urls but just change the UI (and not render an entirely new page?

Upvotes: 4

Views: 1850

Answers (1)

illiteratewriter
illiteratewriter

Reputation: 4333

Do not put <Link to={'/listitem/${listitem.id}'}> there. Instead put an on-click handler with on-click function as this.props.router.push('/bar'). This will cause the route to change.

And when modal is false you can revert the url to previous url using the same method.

Upvotes: 4

Related Questions