【问题标题】:React-router (v4) negate double forward slashesReact-router (v4) 否定双正斜杠
【发布时间】:2020-12-05 12:38:27
【问题描述】:

鉴于这是一个使用 react-router-v4 和 browserhistory 正确路由的工作 url:

https://localhost:8020/User/Category

我的代码实现是正确的,但是如果用户在手动编写 url 时出现以下错误怎么办:

http://localhost:8020/User//Category(双斜杠)

有没有一种方法可以将双斜杠视为一个,而无需手动将它们捕获为有效路线?我见过多个有这种行为的网站。

我尝试创建自己的自定义中间件来拦截位置更改并修复它,但我在输入它时遇到了很多困难,所以我想知道是否有(简单的)替代方案。

提前致谢。

【问题讨论】:

  • 您能详细说明您是如何定义路线的吗?
  • 这个运气好吗?如果您找到解决方案,请分享

标签: javascript reactjs react-router


【解决方案1】:

所以你是说如果用户最终转到/user//category? 怎么办?在这种情况下,浏览器会处理多个连续的正斜杠并将它们视为一个。试试 google.com/// 邮件。仍应将您带到 google.com/mail。因此,您不需要更改任何内容。

【讨论】:

  • 感谢您的信息!我的相对路径没有问题,如果有一种简单的方法可以使双斜杠表现得像一个,我只是得到这个问题..我一定是打错了我的问题,我会尝试清除它
  • 更新答案。
【解决方案2】:

Switch的开头添加这个:

<Redirect from={`User//:name`} to={`User/:name`} />

或者更好,如果你使用

  const { path, url } = useRouteMatch();

然后使用:

<Redirect from={`${path}//:name`} to={`${path}/:name`} />

【讨论】:

    【解决方案3】:

    这听起来与我今天早上遇到的问题相似。如果我从 localhost:3000/home/ (localhost:3000:3000/home//navigation) 出发,我会得到一个双斜杠,但从 localhost:3000/home (localhost:3000/home/navigation) 出发,我会得到一个单斜杠。我通过将链接包装在三元运算符中并检查当前路径中的最后一个字符是否为“/”来解决它。

    (this.props.match.path.slice(-1) === '/') ? `${this.props.match.path}navigation` : `${this.props.match.path}/navigation`
    

    我不知道这对您的问题是否有帮助?

    【讨论】:

    • 这行得通,但首先不应该发生这种情况,因此这是您应用程序中某处错误代码的补丁。不推荐这种方法,鼓励你找到根本原因
    • 找到了。我们没有使用相对链接...哎呀!感谢您的帮助。
    • 太棒了!听起来确实如此,因为如果您不这样做,浏览器/反应路由器会自动添加前导斜杠
    • 嘿,我使用的是相对链接,对此没有任何问题,更重要的是,如果用户在 url 中输入错误怎么办? (我已经澄清了我的问题)
    猜你喜欢
    • 1970-01-01
    • 2017-05-04
    • 2019-08-01
    • 2020-11-20
    • 1970-01-01
    • 2017-11-14
    • 2017-02-20
    • 2012-06-28
    相关资源
    最近更新 更多