Can we nest a component containing routes inside Routes component from react-router?

Question

I am trying to upgrade react router package from version 5 to 6. I have replaced Switch to Routes as below:

<Switch>
  <Route path="/editor"> // takes to the editor route
    {Some component}     
  </Route>
  <ComponentA />
</Switch>

This ComponentA used to have another Switch which had more Route components defined, but now it doesn't allow to have Routes under Routes (previously Switch under a Switch was allowed), nor does it allow to have Fragments.

ComponentA looks like below:

<Switch>
  <Route path="/abc"></Route>
  <Route path="/xyz"></Route>
</Switch>

How can we define a component having more than one Route inside Routes?

Answer 1

You are trying to render what are called descendent routes. I would say it would/could look something like the following where ComponentA is rendered into a route that matches some other base path, e.g. path="*" or path="/*" or path="/otherSubRoute/*", etc. Notice the important part here is the trailing "*" wildcard character so any descendent routes can also be matched and rendered.

Example:

<Routes>
  <Route path="/editor" element={Some component} />
  <Route path="*" element={<ComponentA />} />
</Routes>

ComponentA

<Routes>
  <Route path="/abc" element={....} /> // "*/abc" where * is parent route path
  <Route path="/xyz" element={....} /> // "*/xyz" where * is parent route path
</Routes>