Reactjs 在子路由内部导航无法正常工作 React Router v6

我正在使用React路由v6构建嵌套路由.我面临两个问题:

1. 如果单击具有子级的链接，url应该自动转到子级，但只呈现组件.URL仍然显示"/*".
2. 在我的子元素身上，我有一个链接，可以让我了解整个路径.例如，它应该是"/routeC/subC3/newRoute"

请帮忙.

这是我的密码.

应用程序.js公司

import "./styles.css";
import {
  Navigate,
  Route,
  Routes,
  useMatch,
  useLocation,
  BrowserRouter,
  Link,
  Outlet
} from "react-router-dom";
import ComponentC from "./ComponentC";
import { Fragment } from "react";

const ComponentA = () => <p>Component A</p>;
const ComponentB = () => <p>Component B</p>;

const ComponentC1 = () => <p>I am in Component C1</p>;
const ComponentC2 = () => <p>I am in Component C2</p>;
const SubComponentC3 = () => <p>SubComponent C3</p>;

export const ComponentC3 = () => {
  const location = useLocation();
  const match = useMatch(location.pathname);
  return (
    <>
      <p>Component C3</p>
      <Link to={`${match.path}/newRoute`}>Take me to a new route</Link>
      <Routes>
        <Route
          exact
          path={`${match.path}/newRoute`}
          element={<SubComponentC3 />}
        />
      </Routes>
    </>
  );
};

export const componentCChildren = [
  {
    label: "Component C - 1",
    code: "subC1",
    component: ComponentC1
  },
  {
    label: "Component C - 2",
    code: "subC2",
    component: ComponentC2
  },
  {
    label: "Component C - 3",
    code: "subC3",
    component: ComponentC3
  }
];

export const routeValues = [
  {
    label: "Component A",
    path: "/routeA",
    component: ComponentA,
    children: []
  },
  {
    label: "Component B",
    path: "/routeB",
    component: ComponentB,
    children: []
  },
  {
    label: "Component C",
    path: "/routeC/*",
    component: ComponentC,
    children: componentCChildren
  }
];

export default function App() {
  return (
    <div className="App">
      <BrowserRouter>
        {routeValues.map((item) => (
          <Link key={item.path} to={item.path} style={{ paddingRight: "10px" }}>
            {item.label}
          </Link>
        ))}
        <Routes>
          {routeValues.map((route) => {
            if (route.children.length > 0) {
              return (
                <Route
                  key={route.path}
                  path={route.path}
                  element={<route.component />}
                >
                  {route.children.map((r, i, arr) => (
                    <Fragment key={r.code}>
                      <Route
                        path={`${route.path}/${r.code}`}
                        element={<r.component />}
                      />
                      <Route
                        path={route.path}
                        element={<Navigate to={`${route.path}/${arr[0].code}`} />}
                      />
                    </Fragment>
                  ))}
                </Route>
              );
            }

            return (
              <Route
                key={route.path}
                path={route.path}
                element={<route.component />}
              />
            );
          })}
          <Route path="*" element={<Navigate to="routeA" />} />
        </Routes>
        <Outlet />
      </BrowserRouter>
    </div>
  );
}

组件C.js公司

import { useState } from "react";
import Tab from "@mui/material/Tab";
import Box from "@mui/material/Box";
import TabContext from "@mui/lab/TabContext";
import TabList from "@mui/lab/TabList";
import TabPanel from "@mui/lab/TabPanel";
import { useNavigate, useMatch, useLocation } from "react-router-dom";

import { componentCChildren } from "./App";

export default function ComponentC(props) {
  const navigate = useNavigate();
  const location = useLocation();
  const match = useMatch(location.pathname);

  const [tabId, setTabId] = useState(componentCChildren[0].code);
  const handleTabChange = (e, tabId) => {
    console.log("tabId", tabId);
    navigate(`${tabId}`);
    setTabId(tabId);
  };

  return (
    <>
      <p>Component C</p>
      <TabContext value={tabId}>
        <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
          <TabList onChange={handleTabChange} aria-label="lab API tabs example">
            {componentCChildren.map((tab) => {
              return <Tab key={tab.code} value={tab.code} label={tab.label} />;
            })}
          </TabList>
        </Box>
        {componentCChildren.map((tab) => {
          return (
            <TabPanel key={tab.code} value={tab.code}>
              {<tab.component />}
            </TabPanel>
          );
        })}
      </TabContext>
    </>
  );
}

This is a link to my sandbox.