主页 / 问题 / 997296
Accepted
Александр
Asked:2020-06-28 14:36:50 +0000 UTC2020-06-28 14:36:50 +0000 UTC

React-router BrowserRouter 和 HashRouter 有什么区别？

  • 772

BrowserRouter和HashRouter有什么区别？在什么情况下使用一个或这个选项更好？

reactjs

1 个回答

  1. Best Answer

    简短的回答：

    这两个都将创建一个特殊的历史对象。BrowserRouter如果您有一个响应请求的服务器，并且HashRouter如果您使用的是像 GithubPages 这样的静态文件服务器，则应该使用

    详细回复：

    浏览器路由器

    使用浏览器历史 API ( popstate,replaceState以及方法pushState) 也不支持旧浏览器 (IE 9 及以下)

    <BrowserRouter
  basename={optionalString} 
  forceRefresh={optionalBool}
  getUserConfirmation={optionalFunc}
  keyLength={optionalNumber}
>
  <App />
</BrowserRouter>

    basename- 所有位置的基本路径。

    例子：

    <BrowserRouter basename="/technologies">
    <Link to="/js"/> // рендерит <a href="/technologies/js">
    <Link to="/python"/> // рендерит  <a href="/technologies/python">
</BrowserRouter>

    getUserConfirmation- 该功能用于确认导航，当您<MemoryRouter>直接使用时可以使用此选项<Prompt>。

    粗略地说，当不需要让用户离开页面时（例如，他开始填写表单并放弃它）

    forceRefresh- 如果值将在true router您每次浏览它们时完全更新页面。

    keyLength- 指定属性应该有多长location.key，默认值为 6。（最多 11 个字符，虽然文档中没有写）

    哈希路由器

    使用 hashin URL( window.location.hash) 来操作路由

    <HashRouter
  basename={optionalString}
  getUserConfirmation={optionalFunc}
  hashType={optionalString}
>
  <App />
</HashRouter>

    hashType- 中使用的编码类型window.location.hash。可用值为slash,noslash和hashbang.

    • slash#/-也创建一个哈希#/main/profile
    • noslash#-也创建一个哈希#main/profile
    • hashbang- 第三个选项已过时且不受 Google 支持，我不使用也不建议

    答案已更新，但如果有人需要，我也会在此处（下方）留下我的旧答案。

    一切都非常简单。

    BrowserRouter还有浏览器项目的HashRouter组件。BrowserRouter- 当你在服务器上处理动态请求时应该HashRouter使用，当你有一个静态网站时使用。

    我举个例子：

    如果你使用它上传一些 React 项目到 github上BrowserRouter，gh-pages它不会工作，更准确地说，路由不会工作。

    为什么？

    是的，因为这是一个静态项目，这里需要用到HashRouter示例项目， 可以看这里。从代码中可以看出，我在那里使用HashRouter

    如果您的项目涉及使用后端，则使用BrowserRouter

    • 7

相关问题