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

react router useparams 返回为 undefined

1 个答案: