反应路由器 useparams 以未定义的形式返回

Posted 2023-02-22

【中文标题】反应路由器 useparams 以未定义的形式返回

【英文标题】：react router useparams comes back as undefined

【发布时间】：2021-08-01 06:30:08

【问题描述】：

我正在使用 react-router-dom V5。我的代码的一个简单版本是： 索引.tsx：

ReactDOM.render(
  <React.StrictMode>
    <Router basename=urlExtra>
        <App />
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);

App.tsx

function App() 
  return (
    <>
      <NavBar />
      <main css=content>
        <Switch>
          <Route exact=true path="/" component=Home />
          Routes.map((routes: any) => (
            <Route path=routes.path key=routes.path component=routes.component />
          ))
          <Route path="*" component=NoMatch />
        </Switch>
      </main>
    </>
  );

Navbar.tsx：

const NavBar: React.FC = () => 
  const  organizationId, tenantId  = useParams();
....

因为我的导航栏在我的路由页面之外，所以它永远不会更新，并且当我切换页面时所有参数都保持为“未定义”。当页面更改更新其中一个值时，我如何告诉导航栏链接更新？

【参考方案1】：

useParams 只能从它包含的路由中提取参数。它本质上是useRouteMatch 钩子的捷径，在组件树中使用特定深度的组合路由数据。

您可以通过在任意深度创建自己的路由匹配挂钩实例来手动测试某些路由。例如：

const NavBar: React.FC = () => 
  const match = useRouteMatch(
    path: "/buildings/:organizationId/:tenantId",
    exact: true
  );

当路由不匹配时，match 的值将是 null，当匹配时，它返回一个对象，该对象具有如下所示的属性：

params: 
  organizationId: "someOrganzationId",
  tenantId: "someTenantId"

有关更多信息，请查看useRouteMatch 的文档以及它所基于的函数matchPath。

编辑：

您可以使用更复杂的路径（包括正则表达式）来匹配各种路由语法。在此示例中，路径 Test1 和 Test2 将匹配，但不匹配 Test3 或 Tests：

function NavBar()  
  const match = useRouteMatch('/Test:i([1-2])/:id1/:id2');
  
  const  id1, id2  = 
    id1: match?.params.id1,
    id2: match?.params.id2
  ;
  
  return match && (
    <ul>
      <li><Link to=`/Test1/$id1/$id2`>Test 1</Link>
      </li>
      <li><Link to=`/Test2/$id1/$id2`>Test 2</Link>
      </li>
    </ul>
  )

【讨论】：

老实说，我不确定如何在我正在谈论的示例中使用此功能。基本上我的导航栏在加载的页面之外，所以每次加载不同的页面时，导航栏都不会更新，而且我不知道如何推送到导航栏'嘿，参数已经改变，所以链接在导航栏中应该随之改变/更新'

将参数从match对象中取出并直接插入到您的JSX中，或者将match放入useEffect/useMemo的依赖数组中并得到一些派生的表示数据出它。使用useRouteMatch，您的NavBar 现在应该在新的匹配/不匹配路由或新参数上重新呈现。如果无法做到这一点，那么您可能需要展示其余的组件实现。

感谢您帮助我，但这是我的愚蠢示例：codepen.io/vishnu4/pen/LYWpazQ。单击一个按钮，该按钮会将 ID 值推送到 Route。导航栏不会使用这些 ID 值刷新。我可以尝试使用 useRouteMatch，但这对我来说似乎没有正确更新。

我仍然不确定我是否完全理解您的目标，但这里有一个叉子，它似乎可以满足您的期望：codepen.io/lazaruswist/pen/NWpGVXL?editors=0011。在您已经在填写参数的路线上之前，这些链接自然会失效。

不，你明白了。我为我的案例做了一些小的修改，但你给了我我所缺少的东西。谢谢！