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

Question

我正在使用 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();
....

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

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