React nested routes for every folder

I need help to understand how routing works in React. Currently all my routes are defined in App.js file like this :

function App() {
    return (
    <Fragment>
      <div id="sys_slot">
        <Routes>
          <Route path="/" element={<Dashboard />}/>
          <Route path="/dashboard/*" element={<Dashboard />} />
          <Route path="/wordy/*" element={<Wordy />} />

              <Route path="/wordy/learn" element={<LearnWindow />} />
                  <Route path="/wordy/learn/rumbo" element={<SomeOtherComponent />} />

              <Route path="/wordy/rev" element={<RevWindow />} />

          <Route path="/cetrec/*" element={<Cetrec />} />
        </Routes>
      </div>
      <BottomNav />
    </Fragment>
    );
}

How can I segregate these nested routes (/wordmaster/anything_here/anything_here_again) into their component folders?

Also, what exactly does this Routes tag do, does it play any role in rendering of the component?

Can I use it anywhere in the return code and can I use it(call a Link to path) before these Routes are defined?

I'm using latest RRD version.

Thank you very much for any guidance that you can provide.

Solution 1:

How can I segregate these nested routes ("/wordmaster/anything_here/anything_here_again") into their component folders?

You can move these routes into the component you want to render them. They would be rendered again into a Routes component.

Example:

App - renders the base/root routes, wildcard * appended to route paths so sub-routes can be matched.

<Routes>
  <Route path="/" element={<Dashboard />} />
  <Route path="/dashboard/*" element={<Dashboard />} />
  <Route path="/wordy/*" element={<Wordy />} />
  <Route path="/cetrec/*" element={<Cetrec />} />
</Routes>

Wordy - Renders relative links and paths.

<ul>
  <li>
    <Link to="learn">Learn</Link>
  </li>
  <li>
    <Link to="learn/rumbo">Rumbo</Link>
  </li>
  <li>
    <Link to="rev">Rev</Link>
  </li>
</ul>
<Routes>
  <Route path="learn" element={<LearnWindow />} />
  <Route path="learn/rumbo" element={<SomeOtherComponent />} />
  <Route path="rev" element={<RevWindow />} />
</Routes>

You can keep breaking the routes down as granularly as you need.

Also, what exactly does this Routes tag do, does it play any role in rendering of the component?

It does play a role in the rendering of the component. It's the component that takes the children routes, computes the best match, and renders it.

Routes source

/**
 * A container for a nested tree of <Route> elements that renders the branch
 * that best matches the current location.
 *
 * @see https://reactrouter.com/docs/en/v6/api#routes
 */
export function Routes({
  children,
  location
}: RoutesProps): React.ReactElement | null {
  return useRoutes(createRoutesFromChildren(children), location);
}

Can I use it anywhere in the return code and can I use it(call a Link to path) before these Routes are defined?

Use the Routes component anywhere you are rendering a Route component. The only valid children of Routes is Route and React.Fragment, and all Route components can only be a child of the Routes component or another Route (in the case of nesting routes). Links and routes can be declared independently of each other, but it doesn't make much sense to link to routes that don't exist.