使用 React 路由器参数和 Firebase RTD 创建人类可读的 URL

Posted 2023-02-22

【中文标题】使用 React 路由器参数和 Firebase RTD 创建人类可读的 URL

【英文标题】：Create Human-readable URLs with React Router Parameters and Firebase RTD

【发布时间】：2018-07-29 01:28:43

【问题描述】：

基本上，我试图找出在 SEO 方面在我的网站上构建我的 URL 的最佳方法。现在我的新闻 URL 的结构如下：

http://example.com/news/

http://example.com/news/-FirebaseKey

我能做到的地方——来自上一个例子；直接从 URL 中作为参数提供的 firebase 键中获取文章信息。但是，我知道这对于 SEO 来说不是最佳选择 - 我想知道如何将其更改为具有类似这样的 URL 结构：

http://example.com/news/this-is-an-example

我将如何解决这个问题？

当谈到使用主键和外键时，我真的想不出任何其他理想的解决方案，因为我无法从我的 firebase 数据库中真正唯一地识别“标题”。

【参考方案1】：

如果我理解正确，您希望根据 URL 参数在路由上加载内容，但您需要一个人类可读的字符串，而不是唯一的键。

为此，您需要在创建时设置自定义 Firebase 密钥名称，而不是唯一的自动生成密钥。

定义自定义键：

firebase.database().ref('collection/' + customKey).set(
    username: name,
    email: email,
    profile_picture : imageUrl
  );

不要推送自动生成的：

firebase.database().ref('collection/').push(
        username: name,
        email: email,
        profile_picture : imageUrl
      );

我有点困惑，因为你也说你can't really uniquely identify a 'title'。路线必须是唯一的。同一个 URL 无法将您带到两个不同的网站。如果上面示例中的 this-is-an-example 位是唯一的，那么我上面的方法将起作用。

【讨论】：

好主意，我现在就试试这个。但是，我将如何处理标题中“空格”的替换，并将其替换为“-”以创建“绑定 URL”？

你误会了。自定义键不是您的标题值，而是您希望在 url 中看到的位。永远不会有空格，它将是.ref('collection/' + 'this-is-an-example')。措辞可能与您的标题相匹配，但您的密钥是分开的。例如，如果您要更新标题，则此键字符串将保持不变。

如果您问如何用破折号替换字符串中的空格，然后搜索 SO 或打开一个新问题。那是一个单独的问题。我要么使用正则表达式，要么使用拆分和加入，这两个例子都在这里***.com/questions/1983648/…