React：设置大量路由并在 Web 服务器上正确呈现 GET 请求

Question

简介

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

用例

Zillow 已成功实现此设计模式。如果您在搜索框中输入内容并按回车键，它会将您带到搜索结果页面。如果您单击其中一个结果，顶部的 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/

这些文件夹嵌套得很深。

问题：

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

实际案例

我正在开发一个 React Web 应用程序，但有一段时间，当针对特定路由向服务器发出请求时，我无法加载该应用程序。目前在网上可以找到开发版here。

请注意，我的临时解决方案（您将在下面阅读）尚未在暂存环境中实施

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

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

我在根目录中创建了一个名为“search”的文件夹，复制了应用程序并将其粘贴到该文件夹​​中，使 URL 在用户提交搜索时读取“/search/”（看起来像：@987654326 @)，然后对App做了一些修改，使搜索值存储在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海洋水滴。您的 Web 服务器必须全局安装 NodeJS。

我还发现你可以像这样使用扩展运算符获得路由道具：

      <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>