在 React 中刷新當前頁面可以通過以下幾種方式實現:
window.location.reload()
方法來刷新當前頁面。例如:function refreshPage() {
window.location.reload();
}
<button onClick={refreshPage}>刷新頁面</button>
useHistory
鉤子來刷新當前頁面。首先導入 useHistory
鉤子,然后調用 history.go(0)
方法來刷新頁面。例如:import { useHistory } from 'react-router-dom';
function MyComponent() {
const history = useHistory();
function refreshPage() {
history.go(0);
}
return (
<button onClick={refreshPage}>刷新頁面</button>
);
}
// 在 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 中刷新當前頁面的方法,根據具體情況選擇適合的方式來實現。