为什么在单页应用上浏览不同部分时保存哈希历史记录?

时间:2017-05-14 15:30:05

标签: reactjs

希望获得有关哈希历史记录的一些知识并浏览单页React App。

所以我有链接将用户带到应用程序的不同部分。然后,当我浏览应用程序时,我对保存历史感到好奇。我可以看到为什么要导航到应用程序的不同页面时需要保存历史记录,但是当您浏览单个页面上的不同部分时保存历史记录是否必要/有益?

我的代码看起来像这样。我有链接会转到某个部分,然后会更新网址。

index.js

const history = createHistory()

ReactDOM.render(
  <Router history={history}>
    <div>
      <Switch>
        <Route path='/' component={App}/>
      </Switch>
    </div>
  </Router>,
  document.getElementById('root')
);

App.js

class App extends React.Component {
  render() {
      return(
          <div>
              <a href="#section1">Section 1 </a>
              <a href="#section1">Section 2 </a>
              <a href="#section1">Section 3 </a>
              <section id="section1></section>
              <section id="section2></section>
              <section id="section3></section>
          </div>
      )
  }

}

2 个答案:

答案 0 :(得分:1)

不,在同一页面内导航时无需保存historyhistory使用React Router来匹配routes并在routes上呈现组件。由于您将位于同一页面/组件中,因此route将保持不变。

答案 1 :(得分:1)

这取决于。基本上,您希望用户能够在多大程度上共享/收藏?

如果您更改页面的任何状态的位置(添加到历史记录),您应该准备好仅从位置信息(当用户刷新页面或共享链接时)将应用程序带到该特定状态

在没有此功能的情况下更改位置是没有用的 - 您可以编码,尤其是为用户编写代码。

这通常意味着只有主要页面更改会被推送到历史记录中。