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

时间:2018-02-18 19:12:39

标签: reactjs firebase firebase-realtime-database react-router react-router-dom

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

http://example.com/news/

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

我可以 - 从最后一个例子;直接从URL中提供的firebase密钥中获取文章信息作为参数。但是,我知道这对于搜索引擎优化并不是最理想的 - 而且我想知道如何将其更改为使我的URL结构像这样:

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

我究竟会如何处理这个问题?

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

1 个答案:

答案 0 :(得分:0)

如果我理解正确,您希望基于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'。路线必须是唯一的。相同的网址无法将您带到两个不同的网站。如果上面示例中的this-is-an-example位是唯一的,那么上面的方法就可以了。