リキャンで、現在のページを更新

Reactで現在ページをリフレッシュするには、次の方法があります。

1. window.location.reload()

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

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

1. useHistory を使う
2. useHistory
3. ページを更新

import { useHistory } from 'react-router-dom';

function MyComponent() {
  const history = useHistory();

  function refreshPage() {
    history.go(0);
  }

  return (
    <button onClick={refreshPage}>刷新页面</button>
  );
}

1. 現在のページを更新するために Redux などのステートマネジメントツールを使用します。 Redux では、アクションを作成してボタンクリック時にページ更新を行うためにそのアクションを呼び出します。たとえば、

// 在 actions.js 中
export const refreshPage = () => ({
  type: 'REFRESH_PAGE',
});

// 在 reducer.js 中
const initialState = {
  pageRefreshed: false,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'REFRESH_PAGE':
      return {
        ...state,
        pageRefreshed: true,
      };
    default:
      return state;
  }
};

// 在组件中使用
import { connect } from 'react-redux';
import { refreshPage } from './actions';

function MyComponent({ pageRefreshed, refreshPage }) {
  function handleRefreshPage() {
    refreshPage();
  }

  if (pageRefreshed) {
    window.location.reload();
  }

  return (
    <button onClick={handleRefreshPage}>刷新页面</button>
  );
}

const mapStateToProps = (state) => ({
  pageRefreshed: state.pageRefreshed,
});

const mapDispatchToProps = {
  refreshPage,
};

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

React で現在のページをリフレッシュするには上記の方法を使いますが、場面に合わせて使い分けます。