Question

该场景有点具体且棘手。有一个使用ReactJS和react-router-dom进行路由的客户端应用程序。路由非常基本，如下所示。

<Switch>
  <Route path="/" component={Home} exact/>
  <Route path="/about" component={About} />
  <Route component={404} />
</Switch>

在google将网站编入索引并检查了应用程序的网络缓存后，无论访问了该网站的哪个URL，都会显示404页面。

从该场景中我了解到，google webcache可能会在URL后面添加一些内容，并且由于我们正在寻找exact URL，因此会出错。

所以我重新安排了路由结构

<Switch>
  <Route path="/about" component={About} />
  <Route path="/404" component={404} />
  <Route path="/" component={Home}/>
</Switch>

现在会发生什么，

主页现在是默认组件
404页面

进行上述更改后，对于所有网址，google webcache都将转到默认的首页。

有什么办法解决这个问题？

示例网络缓存网址如下所示 http://webcache.googleusercontent.com/search?client=firefox-b-d&channel=trow&q=cache%3Adomain.com%2Fabout%2F

更新

也尝试了通配符选项。

<Switch>
  <Route path="/about*" component={About} />
  <Route path="/404" component={404} />
  <Route path="/" component={Home}/>
</Switch>

但是仍然在Google网络缓存中，about-us页将转到主页。

示例更新 举例说明问题，
NO match, 404

Codesandbox example to illustrate the issue

Answer 1

据我从您的代码和您的解释中了解，您有3条路线：

1）\作为项目的根源

2）old-match您要重定向到匹配的对象

3）will-match想要显示WillMatch组件

，并且未知路由必须呈现NoMatch组件。为此，最好在您在example.js的{{1}}中的codesandbox中实现此方法，以处理重定向和404组件：

<Switch>
    <Route path="/" exact component={Home} />
    <Route exact={true} path='/old-match' render={() => { return <Redirect to="/will-match" />; }} />
    <Route path="/will-match" component={WillMatch} />
    <Route component={NoMatch} />
</Switch>

React Router dom和Google Webcache内容404错误

1 个答案: