[Docs]: missing documentation on route children

[Jernik]

What version of React Router are you using?

v6.4

Steps to Reproduce

Go to https://reactrouter.com/en/main/route/route#children
See that there is a big TODO on a core concept
Shrug and guess you'll have to dig into the source code to figure out the answer to your question.

Expected Behavior

Documentation to exist when I look for it

Actual Behavior

There is just a TODO from 6 months ago from this PR:
#8937

for a little more context, my questions are:
With nested routes, how do I have a "default" child for the <Outlet />, and what is the recommended way to get route parameters into child components? Should I just use the useParams hook?

[Jernik]

I have figured out the answers to my questions, but my complaints about the missing sections in the docs still stand

[martavis]

I'm having issues as well and looked for documentation to verify if I'm doing something wrong. Is there an ETA on the addition?

[jeremiedubuis]

I have spent a couple hours figuring out how nested routes work juste because no mention of the Outlet component is made in the createBrowserRouter docs. I would advocate for a simple mention in the section where nested routes are described.

[sgarcia-dev]

Agreed. Surprised such an essential aspect of routing is completely missing from the docs. Definitely less tempted to try Remix seeing how the docs for the main react-router library are maintained.

[github-actions]

This issue has been automatically marked stale because we haven't received a response from the original author in a while 🙈. This automation helps keep the issue tracker clean from issues that are not actionable. Please reach out if you have more information for us or you think this issue shouldn't be closed! 🙂 If you don't do so within 7 days, this issue will be automatically closed.

[Jernik]

There is still a todo on this section. This issue is not stale.

[camchardukian]

It would be nice for the docs to be more detailed and discuss best practices, but until then I've found the React Router in Depth series (not my videos) to be helpful for less senior devs to at least pick up the basics (especially video #4).

[NickWoodward]

It's not just "more" detail though, it's a fundamental part of nesting, no? Like the OP, I'm still wondering how to make a child a default.

Definitely puts me completely off even trying Remix.

*Edit:

Make the default child's path '/' like the parent.

const router = createBrowserRouter([
  {
    path: "/",
    element: <AppLayout />,
    errorElement: <ErrorMessage />,

    children: [
      {
        path: "/",
        element: <Test />,
      },
      {
        path: "typescript",
        element: <Test2 />,
      },
    ],
  },
]);

[girishsontakke]

Hi, @brophdawg11 @ryanflorence if anyone is not working on this issue then can I try to write docs for the children prop of the Route element.

[brophdawg11]

Documentation is hard! We're doing some major docs overhauls in Remix at the moment and I expect those ideas will make it back into React Router as well once it's completed and Remix v2 is out.

Most of the information asked in this thread is in the docs somewhere today but potentially missing some cross-links (and maybe that's all we need for the children TODO for now). If folks want to help full in some blanks and/or cross-links in the meantime it would be appreciated!

Here's some of the current areas that might benefit from being cross-linked to:

• The Tutorial is the best place to start to get an understanding of the basic concepts. It has sections on Nested Routes and Outlet.
• The Main Concepts section also contains a section on Outlets.
• The Overview section talks about Nested Routes but could probably use a small paragraph at the end on the need for Outlet in the parent route components.
• Index Routes are covered in the Tutorial and the Main Concepts docs and also on the Route component docs.

[Pyrolistical]

An FAQ would also be helpful. I looked there first. A good question would be:

Q: Why does nested routes use <Outlet/> instead of props.children?

Also actually looking for the answer.
Has been asked:

• Why `<Outlet />`? #8692

[danivideda]

Still no updates on the children docs? I'm new to learning react-router for my Electron project and found that this section is crucial

[katokinawa]

Still no updates on the children docs...

[timdorr]

It's covered in the very first page of the documentation: https://reactrouter.com/6.28.0/start/overview#nested-routes

[Jernik]

It's covered in the very first page of the documentation: https://reactrouter.com/6.28.0/start/overview#nested-routes

@timdorr -
Where is the documentation on the children api on the first page of the documentation? I only see a simple example there for using plain objects, and the rest of the documentation seems to use components.

To be clear here, I think the docs are in a much better place than they were a few years ago when I first opened this, but you'd still have to go across a lot of different pages to answer the (what I think to be) pretty fundamental sorta questions

[timdorr]

children is an implicit prop for any React component. It's anything nested underneath the component. That is basic JSX and out of scope for what we have to explain. What we are responsible for is explaining what nested Route components mean to the library. That is explained in that doc (and the Main Concepts one and the tutorial).