Check if outlet not exist show some thing else in react router 6

Question

I want in react router 6 to show an placeholder when there is no outlet. Is there any way?

<>
   <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/>
</>

Incertitude

Please clarify what you mean by "placeholder" and "when there is no outlet". What are you trying to do? – Swollen

I want to show list of messages in sidebar and when user click a message show the content in front of it. I think to use /message to show only list of message and /message/12 to show list of messages and also content of message with id 12. now if use only enter /message I need to show some placeholder or any think else in right side until user click a single message – Incertitude

Can you update your question to include the relevant routing code then? I think I understand your question, but you should still add a relevant code example. stackoverflow.com/help/minimal-reproducible-example – Swollen

A very reasonable desire, I'm surprised the official docs don't mention this. – Glabrous

Answer 1

I think you can rely on useOutlet hook instead. If the result is null render your placeholder. Detail here: https://reactrouter.com/en/main/hooks/use-outlet

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

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

}

Passim

This is the correct way to do it. Really hard to find this answer but I'm glad there is a hook. Thanks for sharing, the amount of other hacks I saw were wild haha – Discontinue

Answer 2

You can add:

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

Tribadism

See "Explaining entirely code-based answers". While this might be technically correct, it doesn't explain why it solves the problem or should be the selected answer. We should educate along with helping solve the problem. – Evangelina

Answer 3

I was looking for similar behavior when using Remix (based on React Router).

The Index Route is designed for this purpose. More details in this documentation:
https://reactrouter.com/en/6.23.0/start/tutorial#index-routes

When a route has children, and you're at the parent route's path, the <Outlet> has nothing to render because no children match. You can think of index routes as the default child route to fill in that space.

👉 Create the index route module

touch src/routes/index.jsx

For Remix, adding a file _index.tsx with the component to display as a placeholder works effectively:
https://remix.run/docs/en/2.9.1/discussion/routes#conventional-route-configuration

Then <Outlet/> will handle the rest.

Encomium