如何在使用 Material-ui 和 react-router 4 单击模态时更改 URL(但不是整个视图)

Question

我有一个使用材料 UI 的应用程序，List带有 ListItem s。

我希望用户能够单击ListItem并使其打开Modal或Collapse以提供有关ListItem的更多信息。我希望视图保持不变(总体上(，尽管使用链接到该模态或折叠的新 url。

现在，我所能得到的只是用户单击ListItem，它打开了一个全新的视图。

我希望列表详细信息或

列表项详细信息显示在折叠或模式(或同一页面上的某些 UI(中，并且可链接(具有 URL(

法典：

// 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} />} />

这进入了一个全新的页面。如何将其连接到以便我可以在同一页面中显示列表详细信息？

如何设置组件/路由以更改 url 但只更改 UI(而不是呈现一个全新的页面？

Answer 1

不要把<Link to={'/listitem/${listitem.id}'}>放在那里。而是将具有单击功能的单击处理程序作为this.props.router.push('/bar')。这将导致路由更改。

当模态为 false 时，您可以使用相同的方法将 url 恢复到以前的 url。