处理可选的路由路径参数（反应）

Question

基本上我有一个登录路由，我希望能够在其中声明一个可选路径参数。

在我的 React Router 中，我有以下登录路径：

<Route exact path={routingService.loginUrl(":returnUrl?")} render={Auth} />

其中 routingService 声明如下：

const routingService = {
  loginUrl: (returnUrl?: string) => `/login/?${encodeURIComponent(returnUrl || "")}`,
};

我试过这种方法，但没有用。它会将我重定向到 NotFound 页面。

<Route path="*" component={NotFound} />

但是当我手动把路径改成

<Route exact path="/login/:returnUrl?" render={Auth} />

...它确实有效，但我想使用我们在 routingService 中的 (loginUrl) 来组织路径.

这可能很容易解决，但我有点费劲。有什么想法吗？

谢谢！

Answer 1

是不是函数里多了?？

更正一个：

const routingService = {
  loginUrl: (returnUrl?: string) => `/login/${returnUrl || ""}`,
};

编辑：

encodeURIComponent(":returnUrl?") 给我们 '%3AreturnUrl%3F'，所以它可能不起作用。也许不使用 encodeURIComponent 试试？

Answer 2

我不确定为什么删除登录路径中间无关的 "?" 对您不起作用。 encodeURIComponent 肯定是不正确的。您不需要URL编码您尝试匹配的路径。

const routingService = {
  loginUrl: (returnUrl) => `/login/?${encodeURIComponent(returnUrl || "")}`,
};

console.log(routingService.loginUrl(":returnUrl?")); // "/login/?%3AreturnUrl%3F"

删除在 URL 的 queryString 部分放置 returnURL 的额外问号，并删除 encodeURIComponent 函数调用，只是 return returnUrl值。

const routingService = {
  loginUrl: (returnUrl) => `/login/${returnUrl || ""}`,
};

console.log(routingService.loginUrl(":returnUrl?")); // "/login/:returnUrl"

const routingService = {
  loginUrl: (returnUrl?: string) => `/login/${returnUrl || ""}`
};

...

<Switch>
  <Route
    exact
    path={routingService.loginUrl(":returnUrl?")}
    render={(props) => <Auth />}
  />
  <Route path="*" component={NotFound} />
</Switch>

工作沙盒演示

处理可选的路由路径参数（反应）

Handling optional Route path parameter (React)

javascript

frontend

typescript

reactjs

react-router