Как перенаправить на другую страницу в следующем. js на основе css медиа-запрос? - PullRequest
0 голосов
/ 07 января 2020

я новичок в Next. js и у меня следующая ситуация. я хочу перенаправить пользователя на маршрут /messages, если он наберет маршрут /messages/123 на основе css медиазапроса, поэтому, если он мобильн, мы не будем перенаправлять, а если он в браузере, то redirect . я пробовал следующий код

import React, { useLayoutEffect } from 'react';
import { useRouter, push } from 'next/router';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import Layout from '../components/Customer/Layout/Layout';
import Chat from '../components/Customer/Chat/Chat';

const Messages = () => {
 const { pathname, push } = useRouter();
 const matches = useMediaQuery('(min-width:1024px)');

 useLayoutEffect(() => {
   console.log('I am about to render!');
   if (matches && pathname === '/messages') {
     console.log('match!');
     push('/');
   }
 }, [matches, pathname, push]);

 return (
   <Layout currentURL={pathname}>
     <Chat />
   </Layout>
 );
};

export default Messages;

проблема в том, что компонент визуализации дважды перед перенаправлением

1 Ответ

0 голосов
/ 07 января 2020

Но вы, вероятно, должны использовать useEffect, поскольку вы не пытаетесь делать какие-либо манипуляции с DOM или вычисления.

useLayoutEffect: Если вам нужно изменить DOM и / или DO необходимо выполнить измерения

useEffect: Если вы не Вам вообще не нужно взаимодействовать с DOM, иначе ваши изменения DOM не видны (серьезно, большую часть времени вы должны использовать это).

Вы должны увидеть немедленные действия.

Редактировать:

Вы можете использовать Далее JS getInitialProps, чтобы проверить заголовки запроса и определить, будет ли запрос перенаправлен с мобильного или настольного компьютера.

getInitialProps({ res, req }) {
    if (res) {
      // Test req.headers['user-agent'] to see if its mobile or not then redirect accordingly
      res.writeHead(302, {
        Location: '/message'
      })
      res.end()
    }
    return {}
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...