I need to create 2 multi-pages UIs(managementUI and documentUI) with different headers.

updates: the header contains navigation buttons to open and display different subpage components between the header and footer of the UI it belongs to.

e.g. the ApiCardGrid component will be displayed in managementUI.

However, the subpage cannot open in the outlet between header and footer when I clicked button in navigation header.

in App.tsx

function App() {
  const [totalApiData, setTotalApiData] = useState([]);

  useEffect(() => {
    axios.get("/api-documents").then((res) => {
      setTotalApiData(res.data);
    });
  }, []);

  return (
    <>
      <div className="App">
        <Router>
          <Routes>
            <Route
              path="/apiManagement"
              element={<ManagementUI />}
            >
              <Route
                path="apis"
                element={<ApiCardGrid spacing={2} size={3} />}
              />
            </Route>
            <Route
              path="/documents"
              element={<DocumentUI />}
            ></Route>
          </Routes>
        </Router>
      </div>
    </>
  );
}

(update) Following comments made by @Drew Reese, in ManagementUI, I put an Outlet between header and footer to render the contents of subpages like ApiCardGrid. In ManagementUI.tsx:

function ManagementUI() {
  const [totalApiData, setTotalApiData] = useState([]);

  useEffect(() => {
    axios.get("/api-documents").then((res) => {
      setTotalApiData(res.data);
    });
  }, []);

  return (
    <>
      <div className="management-ui">
        <div className="management-header">
          <Header />
        </div>
        <div className="management-content">
          <Outlet />
        </div>
        <div className="management-footer">
          <Footer />
        </div>
      </div>
    </>
  );
}

(update)API List button that link to /apis to display ApiCardGrid component in the Header:

<Header>
<Toolbar
          disableGutters
          variant="dense"
          id="header-primary-navigation"
          className="gds-primary-navigation"
        >
          <nav>
            <Button className="gds-button-primary-navigation" href="/apiManagement/apis">
              API List
            </Button>
            <Link to="/apiManagement/apis">API List</Link>
            <Button className="gds-button-primary-navigation" href="/apiInfo">
              API Info
            </Button>
            <Button className="gds-button-primary-navigation" href="/addApis">
              Add API
            </Button>
            <Button
              className="gds-button-primary-navigation active"
              href="/active"
            >
              active page
            </Button>
          </nav>
        </Toolbar>
</ Header>

similar in Header2 However, when I open UI1 localhost:3000/UI1, the UI1 opened successfully, but if I click button subpage1 to try to display subpage1 in UI1, the console responds error:"No routes matched location "/subpage1".(solved following answer of @Drew Reese)

update: When I input url http://localhost:3000/apiManagement, the UI shows up. However, when I clicked the API List button, the url jumps to http://localhost:3000/apiManagement/apis, but the subpage item not shows up. I opened inspect tool, but no errors in console.

The subpage(ApiGridCard) supposed to display like

CodePudding user response：

When rendering components on routes that render descendent routes the parent routes necessarily need to append the path wildcard "*" to their paths to allow descendent path matching.

Example:

<Router>
  <Routes>
    <Route
      path="/UI1/*"
      element={<UI1 />}
    />
    <Route
      path="/UI2/*"
      element={<UI2 />}
    />
  </Routes>
</Router>

An alternative is to create UI layout routes that render the appropriate header component and an Outlet for nested routes to render their element into.

Example:

import { Outlet } from 'react-router-dom';

const UI1 = () => (
  <div >
    <div >
      <Header1 />
    </div>
    <div >
      <Outlet />
    </div>
    <div >
      <Footer />
    </div>
  </div>
);

const UI2 = () => (
  <div >
    <div >
      <Header2 />
    </div>
    <div >
      <Outlet />
    </div>
    <div >
      <Footer />
    </div>
  </div>
);

...

<Router>
  <Routes>
    <Route path="/UI1" element={<UI1 />}>
      <Route path="subpage1" element={<Subpage1 />} /> // "/UI1/subpage1"
      <Route path="subpage2" element={<Subpage2 />} /> // "/UI1/subpage2"
    </Route>
    <Route path="/UI2" element={<UI2 />}>
      <Route path="subpage3" element={<Subpage3 />} /> // "/UI2/subpage3"
      <Route path="subpage4" element={<Subpage4 />} /> // "/UI2/subpage4"
    </Route>
  </Routes>
</Router>

CodePudding user response：

You need to use useRouteMatch to get current path and append suburl.

function UI1() {
  let { path } = useRouteMatch();
  return (
    <>
      <div >
        <div >
          <Header1 />
        </div>
        <div >
          <Routes>
            <Route
              path={`${path}/subpage1`}
              element={<subpage1 />}
            />
            <Route
              path={`${path}/subpage2`}
              element={<subpage2 />}
            />
          </Routes>
        </div>
        <div >
          <Footer />
        </div>
      </div>
    </>
  );
}

Check out - https://elevateprogramming.blogspot.com/2022/09/react-code-snippets.html for good coding skills