[英]Change URl tabs without page refresh NEXT.JS
我正在使用材质 ui 选项卡,并将选项卡推送到 URL。 我想在每次更改选项卡时推送选项卡但不刷新页面。 这是我的代码,我使用的是 shallow:true 但问题仍然存在:
const tabs = [
{ label: 'Details', value: 'details' },
{ label: 'Purchases', value: 'purchases' },
{ label: 'Money Transfer', value: 'moneyTransfer' },
{label:'User Activity',value:'userActivity'},
{label:'User Logs',value:'userLogs'}
];
const {
query: { UsersId,tab },
} = router
const handleTabsChange = (event: ChangeEvent<{}>, value: string): void => {
router.push({
pathname: `/dashboard/twigUsers/${UsersId}`,query: { tab:value}},undefined,{ shallow: true });
};
<Tabs
indicatorColor="primary"
onChange={handleTabsChange}
scrollButtons="auto"
sx={{ mt: 3 }}
textColor="primary"
value={tab}
variant="scrollable"
>
{tabs.map((tab) => (
<Tab
key={tab.value}
label={tab.label}
value={tab.value}
/>
))}
</Tabs>
{tab === 'details' && (
<UsersDetailsContainer user={user} userId={UsersId}/>
)}
{tab === 'purchases' && <PurchasesListTable userDetailsId={userDetailsId}/>}
{tab === 'moneyTransfer' && <MoneyTransferListTable userDetailsIdMT={userDetailsIdMT} />}
{tab==='userActivity' &&<UserActivity/>}
{tab==='userLogs' &&<UserLogs user={user} userId={twigUsersId}/>}
您需要防止传播,否则这实际上只会传播到父级,并会刷新站点。
const handleTabsChange = (event: ChangeEvent<{}>, value: string): void => {
event.preventDefault();
router.push(
{
pathname: `/dashboard/twigUsers/${UsersId}`,
query: { tab: value },
},
undefined,
{ shallow: true }
);
};
在此处查看实际实施
为了工作,我已经改变了整个逻辑,我已经将标签存储在 redux saga 这里是代码: Redux 部分
// utils
import axios from 'axios';
import produce from 'immer';
import creator from '../../../utils/actionCreator';
import { put, takeLatest } from 'redux-saga/effects';
import { AnyAction } from 'redux';
// consts
export const REQUEST = '@app/tabs/get/getUsersDetailsTabs/REQUEST';
export const SUCCESS = '@app/tabs/get/getUsersDetailsTabs/SUCCESS';
export const FAILURE = '@app/tabs/get/getUsersDetailsTabs/FAILURE';
export const UPDATE_REQUEST = '@app/tabs/get/getUsersDetailsTabs/UPDATE_REQUEST';
export const UPDATE_SUCCESS = '@app/tabs/get/getUsersDetailsTabs/UPDATE_SUCCESS';
export const UPDATE_FAILURE = '@app/tabs/get/getUsersDetailsTabs/UPDATE_FAILURE';
export const CLEAR = '@app/tabs/get/getUsersDetailsTabs/CLEAR';
// initial state
const initalState = {
error: '',
loading: false,
success: false,
tabs:[]
};
// reducer
const reducer = (state = initalState, { payload, ...action }: AnyAction) =>
produce(state, (draft) => {
switch (action.type) {
case REQUEST:
draft.tabs = payload;
break;
case SUCCESS:
draft.loading = false;
draft.tabs = payload;
break;
case FAILURE:
draft.loading = false;
draft.error = payload;
break;
case UPDATE_REQUEST:
draft.loading = true;
break;
case UPDATE_SUCCESS:
draft.loading = false;
draft.success = true;
break;
case UPDATE_FAILURE:
draft.loading = false;
draft.error = payload;
break;
case CLEAR:
draft.loading = false;
draft.error = '';
draft.tabs = [];
break;
default:
break;
}
});
// actions
const actions = {
request: (tabs) => creator(REQUEST, tabs),
success: (tabs) => creator(SUCCESS, tabs),
failure: (tabs) => creator(FAILURE, tabs),
updateRequest: (tabs) => creator(UPDATE_REQUEST, tabs),
updateSuccess: (tabs) => creator(UPDATE_SUCCESS, tabs),
updateFailure: (tabs) => creator(UPDATE_FAILURE, tabs),
clear: () => creator(CLEAR)
};
// sagas
const sagas = {
*getTabs(tabs){
return{
type:REQUEST,
payload:tabs
}
}
};
// watcher
const watcher = function* watch() {
yield takeLatest(REQUEST, sagas.getTabs);
};
// exports
export { actions, watcher };
export default reducer;
调度标签
const [value, setValue] = useState('details');
const handleTabsChange = (event: ChangeEvent<{}>,newValue): void => {
console.log(newValue,"new value")
setValue(newValue);
};
useEffect(() => {
dispatch(getTabs.request(
[ { label: 'Details', value: 'details' },
{ label: 'Purchases', value: 'purchases' },
{ label: 'Money Transfer', value: 'moneyTransfer' },
{label:'User Activity',value:'userActivity'},
{label:'User Logs',value:'userLogs'}]
));
},[]);
const { tabs:tabs } = useSelector((state: RootStateOrAny) => state.tabs);
标签
<Tabs
indicatorColor="primary"
onChange={handleTabsChange}
scrollButtons="auto"
sx={{ mt: 3 }}
textColor="primary"
value={value}
variant="scrollable"
>
{tabs.map((tab) => (
<Tab
key={tab.value}
label={tab.label}
value={tab.value}
/>
))}
</Tabs>
{value === 'details' && (
<UsersDetailsContainer user={user} userId={twigUsersId}/>
)}
{value === 'purchases' && <PurchasesListTable userDetailsId={userDetailsId}/>}
{value === 'moneyTransfer' && <MoneyTransferListTable userDetailsIdMT={userDetailsIdMT} />}
{value==='userActivity' &&<UserActivity/>}
{value==='userLogs' &&<UserLogs user={user} userId={twigUsersId}/>}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.