检查出口是否不存在，在反应路由器6中显示其他内容

Question

我想在React路由器6中当没有插座时显示一个占位符。有什么办法吗

<>
   <Grid item xs={12} sm={2} style={{backgroundColor: '#aaa'}}>
      <Button onClick={() => this.props.navigate('next')} variant='contained'>next</Button>
      <Button onClick={() => this.props.navigate(-1)} variant='contained'>back</Button>
   </Grid>
   <Outlet/>
</>

Answer 1

我认为你可以依靠

useOutlet

钩子来代替。如果结果为空，则渲染您的占位符。详细信息在这里：https://reactrouter.com/en/main/hooks/use-outlet

// Placeholder is your own implementation
function Page() {
  const outlet = useOutlet()

  return <div>{outlet || <PlaceHolder />}</div>

}

Answer 2

您可以添加：

 <Route
    element = { <div>Please select Chat...</div> }
    path = '*' />

Answer 3

我在使用 Remix（基于 React Router）时寻找类似的行为。

索引路线就是为此目的而设计的。您可以在本文档中找到更多详细信息：
https://reactrouter.com/en/6.23.0/start/tutorial#index-routes

对于 Remix，添加文件

_index.tsx

以及要显示为占位符的组件可以有效地工作：
https://remix.run/docs/en/2.9.1/discussion/routes#conventional-route-configuration

然后

<Outlet/>

将处理剩下的事情。