Reactjs 删除使用React路由器的站点中的问题

本周我已经发现了一个与

React-router

相关的bug。首先我认为这个bug只存在于我的网站上。然后我发现一家使用ReactJS的大型公司也存在同样的问题

如果您在url中写入了多个斜杠并按enter键，您将看到（小）站点显示

页眉

和

页脚

巨人项目的行为将是不寻常的。一些组件将被损坏，其中一些将不会显示出来

此项目的示例

,

所以，我尝试清理我的URL

if (window.location.pathname.length > 1) {
      // const url = window.location.pathname.slice(0, 1);
      const url = window.location.pathname.replace(/\/\//g, "");
      history.push(`${url}`);
}

我不知道这为什么不起作用

---

用于测试。如果在url中写入多个斜杠，它将只显示组件的列表。如何解决此问题？

使用window.history.pushstate

if (window.location.pathname.length > 1) {
      // const url = window.location.pathname.slice(0, 1);
      const url = window.location.pathname.replace(/\/\//g, "");
      window.history.pushState('page2', 'Title', url); 
}

---

您需要将一个组件定义为

NotFound

，当用户试图访问应用程序中不存在的任何路径时，该组件将呈现

在你的路线中添加这个

<Route component={NotFound} />

---

这应该出现在所有路由的末尾，否则您将请求它将转到NotFound的任何URL。

考虑这一点，作为您的

Main

的替换

• 它将修复双斜杠或多斜杠问题
• 它将每条管线的静态渲染修复为唯一组件

满满的

import React，{Component}来自“React”；
从“react router dom”导入{Switch，Route}；
从“react router dom”导入{withRouter}；
从“/Home”导入主页；
从“/LOSTER”导入花名册；
从“/Schedule”导入计划；
//主组件呈现提供的三个组件之一
//路由（只要一个匹配）。这两个组织/名册
//和/计划路由将匹配任何启动的路径名
//有/花名册或/时间表。路径/路径将仅匹配
//当路径名正好是字符串“/”时
类主扩展组件{
componentDidMount（）{
this.fixDoubleSlash（）；
}
//将检查双斜杠并重定向到正确的路径。
fixDoubleSlash=（）=>{
常数{
位置：{pathname}，
历史记录：{push}
}=这是道具；
if（pathname.match（/\/{2，}/g））{
push（路径名.replace（/\/{2，}/g，“/”）；
}
};
render（）{
返回(
);
}
}
使用路由器导出默认值（主）；

您是否愿意分享您的源代码route@techipank请选择您想要的任何路线并解决此问题。我给出了一个有问题的Codesandbox url。您好，我很想深入研究一下，您能提供您提供的Codesandbox示例背后的代码吗？@SultanH。这里只显示一个组件，不管url是什么changes@techipank我添加了我的codesandbox，请看上面的评论。谢谢你的回答。但在codesandbox中有错误=（.

未能在“历史记录”上执行“replaceState”。

。不客气，它在组件上工作得很好，但没有安装。@Spectr我已经修复了它，它位于

主
组件中，我还将
修复双斜杠的逻辑移到了主组件而不是应用程序中。问题是您需要
精确的
路由
到='/'
，如果不存在，将处理所有路由，因为它们是
/
的一部分。请查看此链接我检查了您在错误位置添加的代码如果您找到答案，请接受答案并关闭此票证
import React, { Component } from "react";
import { Switch, Route } from "react-router-dom";
import { withRouter } from "react-router-dom";
import Home from "./Home";
import Roster from "./Roster";
import Schedule from "./Schedule";

// The Main component renders one of the three provided
// Routes (provided that one matches). Both the /roster
// and /schedule routes will match any pathname that starts
// with /roster or /schedule. The / route will only match
// when the pathname is exactly the string "/"

class Main extends Component {
  componentDidMount() {
    this.fixDoubleSlash();
  }

  // Will check for double slashes and redirect to the correct path.
  fixDoubleSlash = () => {
    const {
      location: { pathname },
      history: { push }
    } = this.props;

    if (pathname.match(/\/{2,}/g)) {
      push(pathname.replace(/\/{2,}/g, "/"));
    }
  };

  render() {
    return (
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/roster" component={Roster} />
        <Route path="/schedule" component={Schedule} />
      </Switch>
    );
  }
}

export default withRouter(Main);