时间戳

首页 > 解决方案 > BrowserRouter 是否使用比 HashRouter 更多的数据/带宽？

javascript - BrowserRouter 是否使用比 HashRouter 更多的数据/带宽？

问题描述

所以我是一名 iOS 开发者，最近一直在学习一些 React。我现在正在学习路由。目前，我将在 Firebase 托管免费层中托管我的网络应用程序，因此它使用的带宽量是一个真正的问题。

我需要决定是否应该使用 aBrowserRouter或 a HashRouter。据我所知BrowserRouter更好，但作为交换，你放弃了不支持旧版浏览器，我不在乎。

但是，我读过BrowserRouter每次 URL 更改时都会发出 GET 请求，HashRouter但不会。

这是否意味着使用BrowserRouter会更快耗尽我的免费 Firebase 托管带宽？

我的应用将从 Cloud Firestore 获取信息以填充其 UI。这些 GET 请求是否BrowserRouter让我在数据库中浪费了我的空闲操作？这也是目前的一个担忧。

我正在使用 React v16.13.1、react-router-dom v5.2.0、CoreUI for React v3.0.1 和 Typescript v3.7.5，如果这对你有用的话。提前致谢。

标签： javascriptreactjstypescriptrestreact-router

解决方案

但是，我读过 BrowserRouter 每次 URL 更改时都会发出 GET 请求，而 HashRouter 不会。

你好！这不是真的。只要您使用该组件，就会BrowserRouter禁用 HTML 中生成的标签的默认行为。<a href="..." />Link

尝试这个：

import React from "react";
import ReactDOM from 'react-dom'
import {BrowserRouter, Link, Route} from "react-router-dom";

const PageOne = () => {
    return (
        <div>
            <h1>Page One</h1>
            <Link to={"/pagetwo"}>Page 2</Link>
        </div>
    )
}

const PageTwo = () => {
    return (
        <div>
            <h1>Page Two</h1>
            <Link to={"/"}> Page 1</Link>
        </div>
    )
}

const App = () => {
    return (
        <BrowserRouter>
            <Route path={"/"} exact component={PageOne}/>
            <Route path={"/pagetwo"} component={PageTwo}/>
        </BrowserRouter>
    )
}

ReactDOM.render(
    <App/>,
    document.querySelector("#root")
)

检查您的网络流量（通常是 F12 -> 网络）并观察会发生什么！

推荐阅读