如何在 ReactJS 中渲染组件以及更改 url

Question

我有“管理项目”页面，可以在其中看到表格中的项目，其中包含两个操作

Edit

和

Delete

。

必需，单击编辑/删除按钮时，编辑/删除组件应使用像

manage-items/edit/1

或

manage-items/edit?id=1

这样的 url 呈现

目前：

• 基本网址：

  manage-items

必填：

• 编辑网址：

  manage-items/edit/1

  或

  manage-items/edit?id=1

• 删除网址：

  manage-items/delete/1

  或

  manage-items/delete?id=1

试过下面的代码。

const ManageItems = () => {
...
    return (
        <div>
            {edit ? <Routes> <Route path="/edit/:itemId" element={<EditItem itemId={itemId}/>} /> </Routes>
            : delete ? <Routes> <Route path="/delete/:itemId" element={<DeleteItem itemId={itemId}/>} /> </Routes>
            : <ItemTable items={items}/>}
        </div>
    );
};

当标志

edit

和

delete

都为 false 时，我可以看到项目表，但单击时没有其他组件 Edit 或 Delete 正在呈现，URL 也没有更改。 它只是那里的空白区域。

如果我删除然后可以相应地看到编辑和删除组件，但对 URL 没有影响。

需要在点击时相应地更改 URL。

其他代码：

const App = () => {
  return (
    <div id="App" className="app-wrapper">
      <div>
        <Suspense fallback={<Loader />}>
          <ErrorBoundary FallbackComponent={ErrorFallback}>
            <Routes>
              {/* public routes */}
              <Route path={PORTAL_PATH_BASE} element={<Login />} />
              <Route
                path={PORTAL_PATH_UNAUTHORIZED}
                element={<ErrorFallback error={COMMON_ERRORS.unauthorized} />}
              />
              <Route
                path={PORTAL_PATH_PAGENOTFOUND}
                element={<ErrorFallback error={COMMON_ERRORS.pageNotFound} />}
              />
              <Route
                path={PORTAL_PATH_LOGINCALLBACK}
                element={<LoginCallback />}
              />
              {/* we want to protect these routes */}
              <Route element={<RequireAuth />}>
                <Route
                  path={`${PORTAL_PATH_BASE}/*`}
                  element={
                    <WithAxios>
                      <MyAdmin />
                    </WithAxios>
                  }
                />
              </Route>
            </Routes>
          </ErrorBoundary>
        </Suspense>
      </div>
    </div>
  );
};


const MyAdmin = () => {
  const { pathname } = useLocation();
  const [headerNavItems, setHeaderNavItems] = useState();

  useEffect(() => {
    let headerMenuCodes =
      JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEYS.UserInfo)).menu.map(
        (m) => m.menuCode
      ) || [];
    setHeaderNavItems(
      NAV_ITEM_LIST.filter(
        (hdr) => headerMenuCodes.includes(hdr.key) || hdr.key === "XY"
      )
    );
  }, []);

  return (
    <div>
      <CustomHeader navItemList={headerNavItems} />
      <PageBanner
        Title={
          MANAGE_ROUTES.find((route) => route.path === pathname)
            ?.title
        }
      >
        <CustomBreadcrumb />
      </PageBanner>
      <ScrollToTop>
        <Routes>
          <Route path={PORTAL_SUB_PATH_HOME} element={<Home />} />
          <Route
            path={`${PORTAL_SUB_PATH_BPR}/*`}
            element={<BuildingProgress />}
          />
          <Route path={`${PORTAL_SUB_PATH_MANAGE}/*`} element={<ManageItems />} />
          <Route path={`${PORTAL_SUB_PATH_RPT}/*`} element={<Settings />} />
          <Route path="*" element={<PageNotFound />} />
        </Routes>
      </ScrollToTop>
    </div>
  );
};

const DeleteItem = ({itemId}) => {
    ... load item in readonly fields and allow to confirm delete ...
}

const ItemTable = ({items, onEdit, onDelete}) => {
    ... Show table of items with two action buttons as Edit and Delete ...
}

const EditItem = ({itemId}) => {
    ... load item in editable fields and allow to save change ...
}

Answer 1

您需要在根 App/index 组件中声明您的路由。 像这样的东西。

import { Routes, Route, Link } from "react-router-dom";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>App Header</h1>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/manage-items">
          <Route index element={<ManageItems />} />
          <Route path="edit/:id" element={<h2>Edit</h2>} />
          <Route path="delete/:id" element={<h2>Delete</h2>} />
        </Route>
        <Route path="*" element={<h2>Not Found</h2>} />
      </Routes>
    </div>
  );
}

const Home = () => {
  return (
    <>
      <h2>Home</h2>
      <Link to="/manage-items">Go to Items</Link>
    </>
  );
};

const ManageItems = () => {
  return (
    <>
      <h1>Manage Items</h1>
      <div>
        <Link to="edit/1">Edit</Link>
      </div>
      <div>
        <Link to="delete/1">Delete</Link>
      </div>
    </>
  );
};

示例代码沙箱：https://codesandbox.io/s/black-bash-hcvukk