React Router dom 和 Google webcache 内容 404 错误

Posted 2023-02-22

【中文标题】React Router dom 和 Google webcache 内容 404 错误

【英文标题】：React Router dom and Google webcache content 404 error

【发布时间】：2019-11-21 01:48:58

【问题描述】：

这个场景有点具体和棘手。 有一个使用 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>

现在发生的事情是，

Home 现在是默认组件 除非路由到 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

【问题讨论】：

为<Route path="/" component=Home/>保留exact

在这种情况下，如果任何额外的参数附加到 URL，它将是 404。不是吗？就像第一个场景

您可以在 react 路由器的路由中使用 "exact=true" 属性来精确路由，当 url 为 /about-us 时，它会通过插入 "" 捕获 404 的路由。

@behnamshateri 可能是我不够清楚。 exact 将寻找完全匹配。对 URL 的任何动态附加都将转到 404。我添加了代码框模块来详细说明问题。

@JustinGeorge：你发现这个问题了吗？如果是这样，那么您能指导我如何解决此问题吗？我正在运行同样的问题。任何帮助表示赞赏。

【参考方案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>

【讨论】：

感谢您的回答。可能是我没有很好地解释问题，你的解决方案不是我正在寻找的。谷歌网络缓存使用 URL 编码和所有修改 URL。那么，没有一个子 url 将与客户端路由一起使用。