Node.js 反应：设置大量路由，并在web服务器上正确呈现GET请求 介绍

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

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

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

思想。。。

现在，考虑一下：ZiLoW上有数以百万计的列表。

URL相当长。看起来是这样的：

那些文件夹嵌套得很深

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

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

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

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

所以，这就是我所做的，它“在理论上”是有效的 我在根目录中创建了一个名为“search”的文件夹，复制了应用程序并将其粘贴到该文件夹中，这样当用户提交搜索时，URL就会显示为“/search/”（看起来像：

this.props.history.push（“/search/”）

），然后对应用程序进行了一些修改，使其能够将搜索值存储在

localStorage

中。现在，理论上，当您请求获取应用程序的副本时，该应用程序从

localStorage

获取搜索值

现在，我意识到这可能是非常错误的。让我们继续

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

问题： 我说得对吗？
我做错了什么？
我怎样才能做得更好？
有node.js web托管服务器吗？
有没有办法告诉服务器这是一个React路由，而不是对文件夹的请求

更新： 我能理解原来的帖子有多难。加文的回答提供了一个非常好的指导，他的构建确实有效。我遇到的问题是我的web服务器。我刚刚用Wepback构建了一个应用程序，并将其放到PHP服务器中。下面是我用来解决问题的JavaScript：

Server.js 只需将此文件放入您的

/dist

文件夹中，并在安装了NodeJS的web服务器上运行它（并非全部，您需要通过SSH连接到服务器并使用

node server.js

）运行它），例如数字海洋水滴。您的web服务器必须全局安装NodeJ

我还发现，您可以通过这样的排列操作符获得路线道具：

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

} />

所以即使有了这篇关于一个问题的精彩文章，我也不确定你在问什么。我想这可能就是你所说的？我用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“的链接时，请在zillow示例中呈现singleBlogCard.或modal。我过滤数据以仅在参数中显示具有匹配slugname的博客。使用此方法，最坏情况是O（N）。如果是最后一个数据集，则必须触摸每个数据集

然后我在哪里。映射，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>

您使用的是React Native吗？我使用的是React for the web。如果您使用React for the web，当向/blog/'anyslugname'发出常规get请求时，该slug的卡是否正确呈现？我遇到的问题是，当我复制URL并粘贴它时（发出正常请求）到/blog/'anyslugname'，我得到了一个404。检查我的更新。基本上，超高级别，你需要有一个模态，哦，天哪，我也忘了！！！这在开发中不起作用。这意味着如果在本地主机上，你用博客url复制链接，然后粘贴它，它将抛出404！很确定问题出在我的服务器上。它没有运行NodeJS。我有一个VPS和Dreamhost一起启动并运行，我只是“打开了”“为我的网站点头。我有一页说明要遵循，但今天早上我不小心把一把椅子掉在了脚上，因此，在我恢复了脚的感觉后，我不得不回来。经过长时间的努力，我终于明白我做错了什么。我试图在PHP服务器上运行我的React应用程序！所以，我看了你给我的存储库，我注意到
<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>