如何使用 React 刷新页面 - Javascript

在 React 中，通常情况下我们使用组件来渲染我们的页面。而且组件之间的切换是通过状态的改变而触发的，这也就意味着在没有状态改变的情况下无法刷新整个页面。但有时候我们确实需要刷新整个页面，比如在用户局部刷新前需要重置整个页面等情况。这里将介绍一些如何在 React 中实现整个页面的刷新。

使用浏览器跳转

最简单的方法就是使用浏览器跳转，即使用window.location.reload()方法来刷新页面。

function reloadPage() {
  window.location.reload();
}

<button onClick={reloadPage}>刷新页面</button>

这样点击按钮后页面就会刷新。

使用 React-Router 跳转

如果你的应用中使用了 React-Router，那么可以使用它提供的<Redirect>组件来实现页面的跳转。

import React from 'react';
import { Redirect } from 'react-router-dom';

function refreshPage() {
  return <Redirect to="/" />;
}

<button onClick={refreshPage}>刷新页面</button>

这样当用户点击按钮时，页面会先跳转到根路径，然后再跳转回当前页面，实现了整个页面的刷新。

使用 Location.reload()

React-Router 这种做法好像有些复杂，如果你只是想简单地刷新页面，则还有一种方法：location.reload()。

function refreshPage() {
  window.location = window.location.pathname + window.location.search;
}

<button onClick={refreshPage}>刷新页面</button>

这里直接使用了原生的location对象，让页面重新加载一次。

总结

以上是三种实现整个页面刷新的方法，每种方法都有各自的优缺点。使用浏览器跳转是最简单的，但可能会导致一些状态丢失。React-Router 必须要在应用中有路由，如果没有会显得有些复杂。location.reload()则是最原始的刷新方法，但可能会导致一些资源无法正确加载。根据实际情况选择最合适的方法，才能让应用更加健壮。