reactjs - 单击带有 Material-ui 和 react-router 4 的模态时如何更改 URL(但不是整个 View )？

Question

我有一个使用 Material ui 的应用程序 List与 ListItem s。

我希望用户能够点击 ListItem并让它打开一个 Modal或 Collapse提供有关 ListItem 的更多信息.我希望 View 保持不变(整体)，尽管有一个新的 url 链接到该模态或折叠。

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

我想让 ListDetails 或 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} />} />

这将转到一个全新的页面。如何连接它以便我可以在同一页面中显示 ListDetail？

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

Answer 1

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

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