node.js - react : Set up a large number of routes and have GET request render correctly on web server

Question

简介

首先我要说的是，这对我来说是一个非常困难的问题，而且我已经专业编码了 5 年。

用例

Zillow已成功实现此设计模式。如果您在搜索框中输入内容并按 Enter 键，您将进入搜索结果页面。如果单击其中一个结果，顶部的 URL 会发生变化，并会弹出一个模式，其中包含有关您刚刚选择的主页的信息，但页面不会刷新(可能是 React.js)。

重要提示:如果我复制 URL 并将其粘贴到新浏览器中，列表将与我搜索的其他结果一起显示

想法...

现在，请考虑一下:Zillow 上有数百万条列表。 Let's just use this one as an example.

网址很长。它看起来像这样:https://www.zillow.com/homes/for_sale/Old-Town-ME/84999468_zpid/6306_rid/45.005107,-68.629017,44.895403,-68.813553_rect/12_zm/

这些文件夹嵌套得相当深。

问题:

服务器上实际上只有数十亿个文件夹吗？
他们在 map 上每个位置的一个文件夹顶部跟踪的每种类型项目的每个 ID 都有一个？

实际案例

我正在开发一个 React Web 应用程序，有一段时间，当向服务器发出特定路由的请求时，我无法加载应用程序。目前，您实际上可以在互联网上找到一个开发版本here .

请注意，我的临时解决方案(您将在下面阅读有关此内容的内容)尚未在临时环境中实现

当您搜索某些内容时，它会将您带到搜索结果页面，但如果您刷新，则会从服务器收到 404。服务器认为您正在寻找一个名为“搜索”的文件夹，或者只是寻找某个具有相同名称的任意文件。

所以，这就是我所做的，并且“理论上”是有效的。

我在根目录中创建了一个名为“search”的文件夹，复制应用程序并将其粘贴到该文件夹​​中，使用户提交搜索时 URL 为“/search/”(如下所示:this.props.history.push('/search/'))，然后对应用程序进行了一些修改，以便将搜索值存储在 localStorage 中。现在，理论上，当您向 https://www.signaturerep.com/search 发出请求时您将获得从 localStorage 获取搜索值的应用程序的副本。

现在，我意识到这可能是大错特错。让我们继续。

所以，现在我面临着这个问题，如果我想为每个列表(我有 20,000 个列表)创建单独的 URL，并且希望当用户从浏览器顶部复制 URL 时应用程序能够正确加载，我必须制作一份应用程序副本并将其放置在每个列表的唯一文件夹中。

问题:

我说得对吗？
我做错了什么？
我怎样才能让它变得更好？
有没有像 Node.js 网络托管服务器这样的东西？
有没有办法告诉服务器这是一个 React 路由而不是对文件夹的请求？

更新:

我可以看出原始帖子是多么难以理解。加文的回答提供了一个非常好的指导，他的构建确实有效。我遇到的问题是我的网络服务器。我只是用 Wepback 构建一个应用程序并将其放入 PHP 服务器中。这是我用来解决问题的 JavaScript:

服务器.js

// Simply install 'node' and 'express' globally and drop this file in your /dist folder
var express = require("express");
// var router = express.Router(); // You may need this in the future
var path = require("path");
var app = express();

const PORT = 80;

// console.log("A request was made to server.js");
app.use("/", express.static(__dirname));
app.use("/search", express.static(__dirname));
app.use("/search/:value", express.static(__dirname));
app.use("/search/:value/:id", express.static(__dirname));
app.use("/messages", express.static(__dirname));
app.use("/favorites", express.static(__dirname));

app.listen(PORT, () => {
    console.log("Started listening on port", PORT);
});

只需将此文件放入您的 /dist 文件夹中，然后在安装了 NodeJS 的 Web 服务器上运行它(这不是全部，您需要通过 SSH 连接到服务器并使用 node server.js 运行它)，例如 Digital Ocean Droplet。您的 Web 服务器必须全局安装 NodeJS。

我还发现您可以使用扩展运算符获取路线 Prop ，如下所示:

      <Route path="/search/:value/:id" // this one needs to go before /search/:value
        render={(routeProps) => <Search {...routeProps} 
          OtherProps={this.state.OtherProps} />
        } />

Answer 1

因此，即使针对一个问题写了这篇很棒的文章，我也不确定你在问什么。我想这可能是您引用的内容？我使用 React，这就是我们所做的......

<Switch>
    <Route exact path="/" component={NewHome} />
    <Route path="/work" component={MyWork} />
    <Route path="/contact" component={Contact} />
    <Route exact path="/blog" component={Blog} />
    <Route path="/blog/:slug" component={SingleBlogCard} />
    {/* <Route path="/work/:slug" component={Client} /> */}
    <Route component={PageNotFound} />
  </Switch>

通知

    <Route path="/blog/:slug" component={SingleBlogCard} />

这里我说的是，当链接到/blog/'anyslugname"时，会渲染 singleBlogCard。或者在您的 zillow 示例中呈现模态。我正在过滤我的数据，仅显示参数中具有匹配 slugname 的博客。使用此方法最坏的情况是 O(N)。如果是最后一个数据集，您就必须接触每个数据集。

然后我在哪里.map，forEach，用于循环数据集...

<Link to={`/blog/${this.props.blog.url}`}>

注意，然后我需要在数据对象上的某个位置引用您的用例中的 slug 或 ID。

OP 更新。 这些是您可以通过实时链接共享的唯一“路线”。 如果您想要其他路线，例如特定房屋。您必须在此处添加它们。为了演示这一点，制作一个简单的测试组件并将其渲染到/test。否则，您看到的任何 URL 更改都只是根据用户点击来模拟它们，而不是实际加载任何不同的 HTML。

<div id="root-container">
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={App} />
        <Route component={App} />
        <Route path="/search/:slug" component={singleHouseSearched} />
        <Route exact patch='/test component={test} />
      </Switch>
    </BrowserRouter>
  </div>