React Router dom and Google webcache content 404 error

Question

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

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

在谷歌索引网站之后，在检查应用程序的webcache时，无论访问网站的哪个URL，都会显示404页面。

我从场景中了解到，谷歌网络缓存可能会将一些内容附加到 URL，并且由于我们正在寻找exactURL，因此它会出错。

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

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

现在发生的事情是，

1. 主页现在是默认组件
2. 除非路由到 404，否则不会显示 404 页面

在上述更改之后，谷歌网络缓存将转到默认主页，用于所有URL。

有什么方法可以解决这个问题吗？

示例网络缓存 URL 如下所示 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>

但仍然在谷歌网络缓存中，about-us页面将转到主页。

使用示例更新以说明示例问题，不匹配，
404

用于说明该问题的代码沙盒示例

更新

我写了一篇关于谷歌网络缓存和SEO的文章，这可能有助于你理解这个问题可能不再那么相关了。 链接到媒体文章

Answer 1

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

1)作为项目的根源

2)您要重定向到将匹配的old-match

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

并且必须NoMatch组件呈现未知路由。 为此，最好在上面所说的codesandboxexample.js中实现此方法，以便路由处理重定向和 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>