主页 / coding / 问题 / 79437053
Accepted
gokulsgr
Asked: 2025-02-14 00:31:47 +0800 CST

为什么在 React Router 中使用 * 时 useParams 返回不同的结果？

  • 772

我想了解 useParams 在 React Router 中的工作原理。我有两条路由 — 一条带有动态参数，另一条带有通配符 (*)。

我应该怎么做才能获得

 //   {
  //     "appId": "appid",
  //     "*": "page2"
  // }

我有两条路线：

/appid/page2

/appid/page3

这是我的设置： https：//codesandbox.io/p/sandbox/react-router-v6-forked-sw5ndw ？file=%2Fsrc%2FApp.js%3A1%2C1-69%2C1

import React from "react";
import {
  BrowserRouter,
  Routes,
  Route,
  Navigate,
  Link,
  useParams,
} from "react-router-dom";

import "./styles.css";

function HomePage() {
  return <div className="page">🏠 Page</div>;
}
function Page1() {
  return <div className="page">🏠 Page1</div>;
}
function Page2() {
  console.log(useParams());
  //   {
  //     "appId": "appid",
  //     "*": ""
  // }
  return <div className="page">🏠 Page2</div>;
}
function Page3() {
  console.log(useParams());
  //   {
  //     "appId": "appid",
  //     "*": "page3"
  // }
  return <div className="page">🏠 Page3</div>;
}
function Application() {
  return (
    <>
      1
      <Routes>
        <Route path="/" element={<Page1 />} />
        <Route path="/page2/*" element={<Page2 />} />
        <Route path="/page3" element={<Page3 />} />
      </Routes>
    </>
  );
}

export default function App() {
  return (
    <BrowserRouter>
      <div>
        <Link to="/" className="link">
          Home
        </Link>
        <Link to="/appid/page2" className="link">
          APP Page 2
        </Link>
        <Link to="/appid/page3" className="link">
          APP Page 2
        </Link>
      </div>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path=":appId/*" element={<Application />} />
      </Routes>
    </BrowserRouter>
  );
}
reactjs

1 个回答

  1. Best Answer

    问题

    这里的主要问题是，当路由路径是按照您期望的"/appid/page2"那样首先将 splat"*"参数设置"page2"为从根开始，但随后呈现额外的后代路由，用其自己的值覆盖 splat 参数值，在这种情况下是因为没有进一步的路径段可读取。":appId/*"Page2"*"""

    解决建议

    如果您想查看Application组件的路由参数“视图”，那么请使用useParams钩子，Application而不是更深层次嵌套的路由组件。

    function Application() {
  console.log(useParams()); // { appId: 'appid', *: 'page2' }
  return (
    <>
      1
      <Routes>
        <Route path="/" element={<Page1 />} />
        <Route path="/page2/*" element={<Page2 />} />
        <Route path="/page3" element={<Page3 />} />
      </Routes>
    </>
  );
}

    Page2将会看到它的参数“视图”，正如{ appId: 'appid', *: '' }您所观察到的。

    额外的

    如果目的Page2还在于呈现进一步的后代路线，那么我建议为路径中的每个段提供唯一的路径参数标识符，例如path="/:page2/*"。

    例子：

    应用程序

    <Routes>
  <Route path="/" element={<HomePage />} />
  <Route path=":appId/*" element={<Application />} />
</Routes>

    应用

    <Routes>
  <Route path="/" element={<Page1 />} />
  <Route path="/:page2/*" element={<Page2 />} />
  <Route path="/page3" element={<Page3 />} />
</Routes>

    现在当路线路径的"/appid/page2"结果useParams()将是：

    {
  *: "",
  appId: "appid",
  page2: "page2",
}

    当你位于类似 Page2 的子路由时"/appid/page2/foo"，结果将是：

    {
  *: "foo",
  appId: "appid",
  page2: "page2",
}
    • 1

相关问题