Reactjs react router useparams返回为未定义

我正在使用react路由器dom V5。我的代码的简单版本是： Index.tsx：

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

---

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

useparms

只能从其中包含的路由中提取参数。它本质上是

useRouteMatch

钩子的捷径，在组件树中使用特定深度的组合路由数据

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

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

当路由不匹配时，

match

的值将为

null

，当路由匹配时，它将返回一个具有如下属性的对象：

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

有关更多信息，请参阅文档以及构建它的函数

编辑：

您可以使用更复杂的路径（包括正则表达式）来匹配各种路由语法。在本例中，路径

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>
  )
}

函数NavBar（）{
const match=useRouteMatch（'/Test:i（[1-2]）/：id1/：id2'）；
常数{id1，id2}={
id1:匹配？.params.id1，
id2:匹配？.params.id2
};
返回匹配&&(

测试1

测试2


)
}

老实说，我不知道如何将此功能用于我所说的示例。基本上，我的导航栏位于加载的页面之外，因此每次加载不同的页面时，导航栏都不会更新，我不知道如何推送到导航栏‘嘿，参数已经更改，因此，导航栏中的链接应该随之更改/更新，将参数从

match

对象中拉出，直接插入JSX，或者将

match

放入

useffect

/

usemo

的依赖项数组中，并从中获取一些派生的表示数据。当

useRouteMatch

就位后，您的

NavBar

现在应该在新的匹配/不匹配路由或新参数上重新提交。如果不能做到这一点，那么您可能需要展示组件实现的其余部分。感谢您的帮助，但下面是我愚蠢的示例：。单击按钮，将ID值推送到管线。导航栏不会使用这些ID值刷新。我可以尝试使用useRouteMatch，但这对我来说似乎没有正确更新。我仍然不确定我是否完全理解您的目的，但这里有一个fork，它似乎可以实现您的期望：。这些链接自然会失效，直到你已经在一条填充参数的路线上。不，你明白了。我对我的案子做了一些小的修改，但你给了我我所缺少的。非常感谢。

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

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>
  )
}