reactjs - React-Router[V6] independent child routers

Question

Happy Christmas holidays everyone and take care of your health and the health of your family!

I decided to start using the new react-router v6 (version-6) and ran into difficulties in releasing the following task, an example of which I described on: codesandbox

This task is very simple and vital for large projects in my opinion. Its essence is as follows: I want to connect different Layouts that correspond to a specific link path, but NOT changed Content (children).

Unfortunately, I have NOT found examples of how this can be done and at the moment the documentation on this matter is very scarce. Please specify how you can solve this problem?

P.S. I think the trouble is that perhaps the library itself does NOT support such a mechanism, as if a parallel NOT dependent hierarchy of routers

package.json

{
  "name": "and-26616fvv612b1",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "main": "src/index.js",
  "dependencies": {
    "history": "5.0.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-router-dom": "6.0.0-beta.0",
    "react-scripts": "4.0.1"
  },
  "devDependencies": {
    "typescript": "3.8.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

index.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

App.js

import React from "react";
import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";

const Layout1 = ({ children }) => {
  return (
    <div>
      Layout1
      <Outlet />
    </div>
  );
};

const Layout2 = ({ children }) => {
  return (
    <div>
      Layout2
      <Outlet />
    </div>
  );
};

const BaseLayout = () => {
  return (
    <Routes>
      <Route path="content" element={<Layout1 />}>
        <Outlet />
      </Route>
      <Route path="*" element={<Layout2 />}>
        <Outlet />
      </Route>
    </Routes>
  );
};

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<BaseLayout />}>
          <Route path="content" element={<div>content</div>} />
          <Route path="*" element={<div>other</div>} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

the expected result is shown in the picture: enter image description here

Answer 1

等待大神答复