Reactjs 如何更改URL（但不是整个视图）时，点击一个具有材料界面的模式，并作出反应路由器4？

我有一个应用程序，它使用了一个带有

ListItem

s的材质ui

List

我希望用户能够单击

列表项

，并打开

模式

或

折叠

，以提供有关

列表项

的更多信息。我希望视图（整体）保持不变，尽管有一个链接到该模式或崩溃的新url

现在，我所能得到的只是用户点击

列表项

，它会打开一个全新的视图

我想让ListDetails或ListItem详细信息显示在折叠或模式（或同一页面上的某个ui）中，并可链接（有url）

代码：

//列表
//路由器
} />

这将进入全新的一页。如何将其连接到以便在同一页面中显示ListDetail

如何设置组件/路由以更改URL，但只需更改UI（而不呈现全新页面？

不要将

放在那里。而是将带有单击功能的单击处理程序放在那里，如

this.props.router.push（'/bar'）

。这将导致路由更改

当modal为false时，您可以使用相同的方法将url还原为以前的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} />} />