BrowserRouter如何与服务器相关?

时间:2017-09-29 04:09:14

标签: javascript reactjs react-router

我读到了这句话:

  

当你有一个处理动态请求的服务器(知道如何响应任何可能的URI)时,应该使用BrowserRouter,而HashRouter应该用于静态网站(只能响应它知道的文件请求) )。

我是从this得到的。

当我说BrowserRouter should be used when you have a server that will handle dynamic requests.当我点击特定的Link时(在React的情况下),路由器将加载特定组件时,我不明白它到底是什么意思这一切都是在Javascript的客户端完成的(基本上用特定的组件代码替换DOM中的元素)。

如上所述,服务器在哪里使用BrowserRouter?

1 个答案:

答案 0 :(得分:5)

针对HashRouter进行了更新:

对于哈希路由器,您的客户端路由如下所示 - ://www.mysite.com/#login。由于#是仅限客户端的片段并且从未发送到浏览器,即使用户将其加入书签,浏览器仍会仅请求://www.mysite.com/,删除{ {1}}部分。因此,服务器永远不需要被任何动态路径所困扰。 虽然这可能看起来更简单,但从消极方面来说,你最终会失去#login的传统(和实际)目的,即拥有本地锚点。因此,除非您针对的是没有历史记录API的旧浏览器,否则应避免使用此方法。

早些时候:

假设您的网络应用已部署在#上。并且您在://www.mysite.com/处有一个客户端路由,您可以在其上呈现处理身份验证的Login组件。因此,当用户首次访问您的页面时,服务器通常会将/login发送到浏览器,它将引导您的React应用程序。

然后根据默认组件中的逻辑index.html,您将用户重定向到App路由,并通过react-router挂载Login组件。网址现在是/login,到目前为止一切都很好!

现在说用户此时为页面添加了书签并稍后访问过,或者只是点击刷新。浏览器现在会向服务器询问://www.mysite.com/login处的页面,这是服务器必须发送回://www.mysite.com/login的位置。

事实上,对于所有客户路线的单页应用(又称SPA),服务器必须发回应用的引导文件,即index.html

这就是引号中该语句的含义。您必须将服务器配置为发送回任何动态路径的index.html。

希望这会有所帮助:)。