Jad S Jad S - 1 month ago 8
React JSX Question

In React-Router docs, what does this paragraph mean in the "Index Routes" section?

In Lesson 8 of the React-Router docs, discussing "Index Routes", they describe the following paragraph:

This would work fine, but its likely we'll want
to be attached to
a route like
in the future. A few reasons include:

  • Participating in a data fetching abstraction that relies on matched
    routes and their components.

  • Participating in

  • Participating in code-splitting

Also, it just feels good to keep

decoupled from
and let the route config decide what to render as
the children. Remember, we want to build small apps inside small apps,
not big ones!

I was fine with the rest of the docs, but I'm having a hard time understanding what they're talking about here.

1- What do they mean by "
attached to a route"?

2- What are "data fetching abstraction", why is this a good thing?

3- What is code-splitting?

I believe this fits the format of questions here (objectively answerable, related to software). Thanks in advance.

  1. Every route is associated to a component (not the other way around). It simply says that you may want for the component to be rendered not only in / (default path without using any router) but on a given route.

  2. I'm not certain about this one, I think it refers to the capability of a component to load different data based on the route, minimizing the payload.

  3. From the webpack documentation:

For big web apps it’s not efficient to put all code into a single file, especially if some blocks of code are only required under some circumstances. Webpack has a feature to split your codebase into “chunks” which are loaded on demand.