如何根据CSS媒体查询重定向到下一个.js的另一个页面?

Question

>im 全新到下一步.js 我有以下情况。 我想将用户重定向到路由/messages如果他根据 CSS 媒体查询键入路由/messages/123，所以如果他是移动的，我们不会重定向，如果他在浏览器中然后重定向. 我尝试了以下代码

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;

问题是组件在重定向之前呈现两次

Answer 1

但是您可能应该使用useEffect，因为您没有尝试进行任何DOM操作或计算。

useLayoutEffect：如果您需要改变 DOM 和/或确实需要执行测量

useEffect：如果你根本不需要与 DOM 交互，或者你的 DOM 更改是不可观察的(说真的，大多数时候你应该使用它(。

您应该会看到立即采取行动。

编辑：

您可以使用 Next JSgetInitialProps检查请求标头，并确定请求是从移动设备还是桌面设备，然后从那里重定向。

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 {}
}