Как сделать перенаправление на другую страницу с условием из контекста, react-router-dom v6?

Question

[TheSnegok]

Приветствую, у меня есть страница продукта которая должна отрисовыватся от того является ли в контексте ключ product === null или нет, если равно то перекидывать на другую страницу, у меня в этой компоненте должны браться данные з контекста, проверятся не равен ли продукт нулю и используется два useState для состояния кнопок которые должны тоже брать состояние из контекста, думал может в route как-то можно сделать редирект?
Код:
App

<Routes>
                <Route path="/" element={<Main />} />
                <Route path="/product" element={<ProductPage />} />
                <Route path="*" element={<ErrorPage />} />
</Routes>

ProductPage

export const ProductPage = () => {

	const { product, contextFindItem, contextRemoveItem, contextPushItem } = useGlobalContext();

	if (product === null) {
		<Navigate to="/" />
	}// если ставить тут, то ошибка что нельзя использовать перенаправление до загрузки useState, а если ставить после // этого то ошибка что в useState personalKey === null

	const [like, setLike] = useState<boolean>(contextFindItem('likes', product!.personalKey) ? false : true);
	const [buy, setBuy] = useState<boolean>(contextFindItem('basket', product!.personalKey) ? false : true);

	return (
		<>
                       <div className={s.productInfoMainAdd}>
							<button className={s.productInfoMainAddBuy} onClick={() => clickSetIn('basket')}>{buy ? 'В корзине' : 'В корзину'}</button>
							<button className={s.productInfoMainAddLike} onClick={() => clickSetIn('likes')}>{like ? 'Нравится' : 'Не нравится'}</button>
						</div>
               </>
	)
}

Answer 1

[Alexandroppolus]

return <Navigate to="/" />

Comments

[TheSnegok]

ну я вот так сделал но оно не хочет делать переход:

xport const ProductPage = () => {

	const { product, contextFindItem, contextRemoveItem, contextPushItem } = useGlobalContext();

	const [like, setLike] = useState<boolean | null>(null);
	const [buy, setBuy] = useState<boolean | null>(null);

	useEffect(() => {
		if (product === null) {
			<Navigate to="/" />
		} else {
			setLike(contextFindItem('likes', product.personalKey) ? false : true);
			setBuy(contextFindItem('basket', product!.personalKey) ? false : true);
		}
	}, [product])

	return (
	//jsx использует product
	)
}

хочу ещё чтобы шла сразу и проверка product === null

[Alexandroppolus]

TheSnegok, если тебе этот переход надо сделать внутри useEffect, то используй https://reactrouter.com/docs/en/v6/hooks/use-navigate

позволяет сделать переход в рендере. В твоем случае он больше подходит. А состояния like и buy - производные, и потому не нужны. Ведь источник этих значений хранится в глобальном контексте.

итого:

const ProductPage = () => {

  const { product, contextFindItem, contextRemoveItem, contextPushItem } = useGlobalContext();
  
  const like = useMemo(() =>
        product ? contextFindItem('likes', product.personalKey) : null,
        [contextFindItem, product]
  );

  const buy = useMemo(() =>
        product ? contextFindItem('basket', product.personalKey) : null,
        [contextFindItem, product]
  );

  if (product === null) {
    return <Navigate to="/" />
  }

  return (
  //jsx использует product
  )
}

[TheSnegok]

Alexandroppolus, Сделал с помощью useNavigate() но оно не работает, подскажите что не так делаю?

const { product, contextFindItem, contextRemoveItem, contextPushItem } = useGlobalContext();

	const [like, setLike] = useState<boolean | null>(null);
	const [buy, setBuy] = useState<boolean | null>(null);

	let navigate = useNavigate();

	useEffect(() => {
		if (product === null) {
			navigate('/');
		} else {
			setLike(contextFindItem('likes', product.personalKey) ? false : true);
			setBuy(contextFindItem('basket', product!.personalKey) ? false : true);
		}
	}, [])