Open Flaain opened 6 hours ago
p.s. i upgraded version to latest ( 6.26.2 ) and error still appears. I really have no idea why. p.p.s. It's looks like i loss context somehow cuz i can useNavigate inside Layout and LayoutSheet but inside CreateGroupProvider it throw error
For temporary use i decided to provide navigate function as a prop to CreateGroupProvider. It looks ugly but it works and i really don't know what to do with this error.
export const LayoutSheet = () => {
const onOpenModal = useModal((state) => state.actions.onOpenModal);
const navigate = useNavigate();
const profile = useProfile((state) => state.profile);
const theme = useTheme((state) => state.theme);
const onSheetAction = (modal: ModalConfig) => {
useLayout.setState({ isSheetOpen: false });
onOpenModal(modal);
};
return (
// another jsx
<li className='first:my-4 first:py-1 first:border-y dark:first:border-primary-dark-50 first:border-primary-dark-200'>
<Button
variant='ghost'
className='rounded-none flex items-center justify-start gap-4 w-full'
onClick={() =>
onSheetAction({
withHeader: false,
content: (
<CreateGroupProvider navigate={navigate}>
<CreateGroup />
</CreateGroupProvider>
),
bodyClassName: 'w-[450px] p-3 h-auto'
})
}
>
<Users className={listIconStyle} />
<Typography weight='medium'>New Group</Typography>
</Button>
</li>
);
};
What version of React Router are you using?
6.22.3
Steps to Reproduce
I know this error happen cuz of calling hook outside of router context. But it's actually inside context.
Here is my main.tsx:
this is my router:
baseLayout:
layout:
and finally this is my LayoutSheet where error appears when i call create group:
So this is CreateGroupProvider where i call useNavigate and get error cuz of it: