React Router dom 和 Google webcache 内容 404 错误

Question

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

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

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

我从场景中了解到，google webcache 可能会在 URL 上附加一些内容，并且由于我们正在寻找 exact URL，所以它会出错。

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

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

现在发生的事情是，

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

经过上述更改后，google webcache 将转到默认主页，用于所有 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>

但仍在 Google 网络缓存中，about-us 页面将进入首页。

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

Codesandbox example to illustrate the issue

更新

我写了一篇关于 Google Web 缓存和 SEO 的文章，这可能会帮助您了解这个问题可能不再那么相关了。 Link to Medium article

Answer 1

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

1) \ 作为项目的根

2) old-match 你想重定向到 will-match

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

并且未知路由必须渲染NoMatch组件。 为此，最好在您的 codesandbox 中的 example.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>