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

Question

我想在反应路由器 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

我认为你可以依靠useOutlethook 来代替。如果结果为空，则渲染您的占位符。详细信息在这里：https://reactrouter.com/en/main/hooks/use-outlet

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

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

}