单击带有 Material-ui 和 react-router 4 的模态时如何更改 URL（但不是整个视图）？
How to change URLs (but not entire view) when clicking on a modal with Material-ui and react-router 4?
我有一个使用 material ui List 和 ListItem 的应用程序。
我希望用户能够单击 ListItem 并打开 Modal 或 Collapse 以提供有关 ListItem 的更多信息。我希望视图保持不变（总体），尽管有一个链接到该模态或折叠的新 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？
如何设置 components/routing 来更改 url 而只是更改 UI（而不是呈现一个全新的页面？
不要把<Link to={'/listitem/${listitem.id}'}>放在那里。而是将 on-click 处理程序与 on-click 函数作为 this.props.router.push('/bar')。这将导致路线改变。
当模态为 false 时，您可以使用相同的方法将 url 恢复为之前的 url。
我有一个使用 material ui List 和 ListItem 的应用程序。
我希望用户能够单击 ListItem 并打开 Modal 或 Collapse 以提供有关 ListItem 的更多信息。我希望视图保持不变（总体），尽管有一个链接到该模态或折叠的新 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？
如何设置 components/routing 来更改 url 而只是更改 UI（而不是呈现一个全新的页面？
不要把<Link to={'/listitem/${listitem.id}'}>放在那里。而是将 on-click 处理程序与 on-click 函数作为 this.props.router.push('/bar')。这将导致路线改变。
当模态为 false 时，您可以使用相同的方法将 url 恢复为之前的 url。