javascript - 手动刷新或写入时，React-router url 不起作用

Question

我正在使用 React-router，当我点击链接按钮时它工作正常，但是当我刷新我的网页时，它没有加载我想要的内容。

例如，我在 localhost/joblist一切都很好，因为我是按链接到达这里的。但是如果我刷新网页，我会得到:

Cannot GET /joblist

默认情况下，它不是这样工作的。最初我的 URL 为 localhost/#/和 localhost/#/joblist他们工作得很好。但是我不喜欢这种网址，所以想抹掉那个 # ， 我写:

Router.run(routes, Router.HistoryLocation, function (Handler) {
 React.render(<Handler/>, document.body);
});

localhost/ 不会发生此问题，这个总是返回我想要的。

编辑:这个应用程序是单页的，所以 /joblist不需要向任何服务器询问任何事情。

编辑2:我的整个路由器。

var routes = (
    <Route name="app" path="/" handler={App}>
        <Route name="joblist" path="/joblist" handler={JobList}/>
        <DefaultRoute handler={Dashboard}/>
        <NotFoundRoute handler={NotFound}/>
    </Route>
);

Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body);
});

Answer 1

查看对已接受答案的评论以及此问题的一般性质(“不起作用”)，我认为这可能是对此处涉及的问题进行一些一般性解释的好地方。因此，此答案旨在作为 OP 特定用例的背景信息/详细说明。请多多包涵。
服务器端 vs 客户端
要了解的第一件大事是现在有 2 个地方可以解释 URL，而过去在“过去”只有 1 个地方。过去，生活简单的时候，有用户发来了http://example.com/about的请求。到服务器，它检查 URL 的路径部分，确定用户正在请求关于页面，然后发回该页面。
使用 React-Router 提供的客户端路由，事情就不那么简单了。首先，客户端还没有加载任何 JS 代码。因此，第一个请求将始终发送到服务器。然后将返回一个页面，其中包含加载 React 和 React Router 等所需的脚本标签。只有当这些脚本加载后，阶段 2 才会开始。例如，在阶段 2 中，当用户单击“关于我们”导航链接时，URL 仅在本地更改为 http://example.com/about (由 History API 实现)，但是 没有向服务器发出请求 .相反，React Router 在客户端做它的事情，决定渲染哪个 React View ，然后渲染它。假设您的关于页面不需要进行任何 REST 调用，它已经完成了。您已从主页转换到关于我们，而没有触发任何服务器请求。
所以基本上当你点击一个链接时，一些 Javascript 会运行来操作地址栏中的 URL，而不会导致页面刷新，这反过来会导致 React Router 执行页面转换 在客户端 .
但是现在考虑如果您将 URL 复制粘贴到地址栏中并将其通过电子邮件发送给 friend 会发生什么。您的 friend 尚未加载您的网站。换句话说，她仍处于阶段 1。她的机器上还没有运行 React Router。所以她的浏览器会生成 服务器请求 至 http://example.com/about .
这就是你的麻烦开始的地方。到目前为止，您只需在服务器的 webroot 中放置一个静态 HTML 即可。但这会给 404从服务器请求时所有其他 URL 的错误。这些相同的 URL 在客户端工作正常，因为 React Router 正在为你做路由，但它们在服务器端失败，除非你让你的服务器理解它们。
结合服务器端和客户端路由
如果您想要 http://example.com/about要在服务器端和客户端都工作的 URL，您需要在服务器端和客户端为其设置路由。有道理吗？
这就是您的选择开始的地方。解决方案的范围从完全绕过问题，通过返回引导 HTML 的包罗万象的路由，到服务器和客户端运行相同 JS 代码的完全同构方法。
.
完全绕过问题:哈希历史
与 Hash History而不是 Browser History ，您的关于页面的 URL 将如下所示:http://example.com/#/about哈希 ( # ) 符号后面的部分不会发送到服务器。所以服务器只能看到http://example.com/并按预期发送索引页。 React-Router 将接收 #/about部分并显示正确的页面。
缺点 :

“丑陋”网址

使用这种方法无法进行服务器端渲染。就搜索引擎优化 (SEO) 而言，您的网站由一个页面组成，上面几乎没有任何内容。

.
包罗万象
使用这种方法，您确实使用浏览器历史记录，但只需在发送 /* 的服务器上设置一个包罗万象的信息。至 index.html ，有效地为您提供与哈希历史相同的情况。但是，您确实有干净的 URL，以后可以改进此方案，而不必使所有用户的收藏夹失效。
缺点 :

设置更复杂

仍然没有好的 SEO

.
杂交种
在混合方法中，您可以通过为特定路由添加特定脚本来扩展包罗万象的场景。您可以编写一些简单的 PHP 脚本来返回包含内容的站点中最重要的页面，这样 Googlebot 至少可以看到您页面上的内容。
缺点 :

设置更复杂

只有对您给予特殊待遇的那些路线的良好 SEO

复制用于在服务器和客户端上呈现内容的代码

.
同构
如果我们使用 Node JS 作为我们的服务器，这样我们就可以在两端运行相同的 JS 代码呢？现在，我们在单个 react-router 配置中定义了所有路由，我们不需要复制渲染代码。可以这么说，这就是“ chalice ”。如果页面转换发生在客户端，服务器会发送与我们最终得到的完全相同的标记。该解决方案在 SEO 方面是最佳的。
缺点 :

服务器必须(能够)运行 JS。我已经尝试过 Java i.c.w。 Nashorn 但它对我不起作用。实际上，这主要意味着您必须使用基于 Node JS 的服务器。

许多棘手的环境问题(在服务器端等使用 window)

陡峭的学习曲线

.
我应该使用哪个？
选择一个你可以逃脱的。就我个人而言，我认为全能设置足够简单，所以这将是我的最低要求。此设置可让您随着时间的推移不断改进。如果你已经在使用 Node JS 作为你的服务器平台，我肯定会研究做一个同构应用程序。是的，一开始很难，但是一旦掌握了窍门，它实际上是解决问题的非常优雅的方法。
所以基本上，对我来说，这将是决定性因素。如果我的服务器在 Node JS 上运行，我会去同构；否则，我会选择 Catch-all 解决方案，并随着时间的推移和 SEO 要求的需要对其进行扩展(混合解决方案)。
如果你想了解更多关于 React 的同构(也称为“通用”)渲染，有一些关于这个主题的很好的教程:

React to the future with isomorphic apps

The Pain and the Joy of creating isomorphic apps in ReactJS

How to Implement Node + React Isomorphic JavaScript & Why it Matters

此外，为了让您入门，我建议您查看一些入门套件。选择与您的技术堆栈选择相匹配的一个(请记住，React 只是 MVC 中的 V，您需要更多的东西来构建完整的应用程序)。首先看看 Facebook 自己发布的那篇文章:

Create React App

或者从社区中选择其中之一。现在有一个不错的站点，可以尝试为所有这些站点建立索引:

Pick your perfect React starter project

我从这些开始:

React Isomorphic Starterkit

React Redux Universal Hot Example

目前，我正在使用受上述两个入门套件启发的自制版本的通用渲染，但它们现在已经过时了。
祝你的任务好运!