主页 / 问题 / 1098756
Accepted
DmitryDevelop
Asked:2020-03-24 02:36:45 +0000 UTC2020-03-24 02:36:45 +0000 UTC

如何从不完整的地址重定向到完整的 React Router

  • 772

有一个产品页面/product，它本身后面必须有3个参数，即/product/1/1/1你需要使它从页面/product/544/重定向到/product/544/1/1

并从页面/product/522/1重定向到/product/522/1/1.

第二个和第三个参数相同的事实是正确的。

我的尝试：

  <Switch>
    <Route path="/product/:product/:idType/:idSubType">
      <Product />
    </Route>
    <Route path="/product/:product/:idType">
      <Redirect to="/product/:product/:idType/1" />
    </Route>
    <Route path="/product/:product">
      <Redirect to='/product/:product/1/1' />
    </Route>
  </Switch>

我的代码的问题是，当使用重定向时，它不知道参数:product，或者:idType只是插入文本，即使它必须插入从父级接收到的参数！

我是 React 新手将不胜感激

reactjs

1 个回答

  1. Best Answer

    要访问资源以访问需要地址栏中某些参数的必要组件，您需要在地址栏中传递这些参数的值。如果您需要执行某种重定向，那么您可以通过阻力最小的路径，因为路由参数可以是可选的。什么是危险的，我将用一个例子来展示，有以下路线：

    <Route path="/product/:product/:idType/:idSubType">
  <Product />
</Route>

    到这里一切都非常清楚了，访问这条路由的时候，一定要传入参数的值product，idType和idSubType。但是您可以通过在其定义中包含问号来将参数标记为可选，如下所示：

    <Route path="/product/:product/:idType?/:idSubType?">
  <Product />
</Route>

    这种形式的路由入口意味着idType和idSubType-参数的值是可选的。之后，以下路线将指向同一页面：

    1. /product/544
    2. /product/544/1
    3. /product/544/1/1

    而且根本没有必要Redirect在您的情况下使用并描述几个Route. Route仅用可选参数描述一个就足够了。并且已经在组件本身内部，您可以定义额外的条件，以便您了解指定了哪些参数，并在必要时覆盖该值。

    链接到有用的来源：带有可选路径参数的 React Router

    • 1

相关问题