React-router(v4)否定双正斜杠

时间:2018-03-12 14:38:48

标签: javascript reactjs react-router

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

  

https://localhost:8020/User/Category

我的代码实现做得对,但如果用户在手动编写网址时出现以下错误该怎么办:

  

http://localhost:8020/User//Category(双前锋斜线)

有没有办法可以将双斜杠视为一个而不必手动将它们作为有效路径捕获?我见过多个网站都有这种行为。

我尝试创建自己的自定义中间件来拦截位置更改并修复它但我输入的内容非常多,所以我想知道是否有(简单)替代方案。

提前致谢。

3 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

这听起来像我今天早上遇到的一个问题。如果我从localhost:3000/home/localhost:3000:3000/home//navigation)开始,但是来自localhost:3000/homelocalhost:3000/home/navigation)的单曲,我会得到双斜线。我通过将我的链接包装在三元运算符中并检查当前路径中的最后一个字符是否为' /'来解决它。

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

我不知道这是否有助于解决您的问题?

答案 2 :(得分:0)

Switch的开头添加此内容:

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

或者更好,如果您使用

  const { path, url } = useRouteMatch();

然后使用:

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