Question

因此，我必须链接例如home（/）和mobile（/mobile）。如果屏幕分辨率较小（例如，移动设备），我需要将路由更改为/mobile。反之亦然，如果屏幕尺寸较大（例如笔记本电脑/台式机）。

这与让家庭响应无关。只是我试图在两种视图中显示不同的东西。

动机就像facebook一样，即为移动设备添加m.facebook.com。但是我要改变路线。

谢谢。

Answer 1

您可能有一个状态，例如isMobile，您可以根据视口是否低于特定宽度在true和false之间切换。

如果您希望它具有响应性，则可以为resize事件添加一个侦听器，并在调整屏幕大小时再次检查。

示例

class MyRedirect extends React.Component {
  state = {
    isMobile: window.innerWidth <= 768
  };

  componentDidMount() {
    window.addEventListener("resize", this.checkIfMobile);
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.checkIfMobile);
  }

  checkIfMobile = () => {
    const { isMobile } = this.state;
    const becameMobile = window.innerWidth <= 768;

    if (isMobile !== becameMobile) {
      this.setState({ isMobile: becameMobile });
    }
  };

  render() {
    return <Redirect to={this.state.isMobile ? "/mobile" : "/"} />;
  }
}

Answer 2

在componentDidMount中设置如下条件：

import React, { Component } from 'react'; 
import { withRouter } from 'react-router-dom';
 
class MyComponent extends Component {
  componentDidMount() {
    // mobile 
    if (window.screen.width <= 480) {
      this.props.history.push('/path');
    }
  }
  
  ...
}

export default withRouter(MyComponent);

在较小的屏幕分辨率下，如何重定向/路由到其他链接，反之亦然？

2 个答案: