Reactjs 在React中确定浏览器的屏幕大小后，如何重定向到路由？

我有一个只为大屏幕开发的React应用程序（不包括移动设备）。我创建了一个不同的组件来显示应用程序是否由移动设备打开，以及是否创建了路由。为了触发重定向，我在index.js文件中创建了一个函数问题是，当我在手机上打开应用程序时，该函数无法返回重定向

index.js

import { Front, MobileComponent } from './pages';

  const MobileRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => {
      return <Component {...props} />
    }}
    />
  )
  
  function checkMobile() {
    if (window.screen.width < 768) {
      return <Redirect to={{ pathname: '/mobile' }} />
    }
  }
  
  checkMobile();
  
  render(
          <BrowserRouter>
            <Switch>
              <Route exact path="/" component={Front} />
              <MobileRoute path="/mobile" component={MobileComponent} />
            </Switch>
            <ToastMessage />
            <GlobalHandler />
          </BrowserRouter>
    ,
    document.getElementById('root')
  );

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class MobileComponent extends Component {

    render() {

        return (
            <div className="mobileComponentMain">
                <div className="mobileComponentInner">
                    <img src="/static/images/site/newlogo_temp.jpeg" alt="newlogo" className="mobileComponentLogo" />
                    <div className="mobileComponentText">
                        <span>Open Home mobile app is coming soon!</span>
                    </div>
                </div>
            </div>
        );
    }
}

export default withRouter(MobileComponent);

从“/pages”导入{Front，MobileComponent}；
常量MobileRoute=（{component:component，…rest}）=>(
{
返回
}}
/>
)
函数checkMobile（）{
如果（窗口.屏幕.宽度<768）{
返回
}
}
checkMobile（）；
渲染(
,
document.getElementById（'root'））
);

MobileComponent.js

import { Front, MobileComponent } from './pages';

  const MobileRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => {
      return <Component {...props} />
    }}
    />
  )
  
  function checkMobile() {
    if (window.screen.width < 768) {
      return <Redirect to={{ pathname: '/mobile' }} />
    }
  }
  
  checkMobile();
  
  render(
          <BrowserRouter>
            <Switch>
              <Route exact path="/" component={Front} />
              <MobileRoute path="/mobile" component={MobileComponent} />
            </Switch>
            <ToastMessage />
            <GlobalHandler />
          </BrowserRouter>
    ,
    document.getElementById('root')
  );

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class MobileComponent extends Component {

    render() {

        return (
            <div className="mobileComponentMain">
                <div className="mobileComponentInner">
                    <img src="/static/images/site/newlogo_temp.jpeg" alt="newlogo" className="mobileComponentLogo" />
                    <div className="mobileComponentText">
                        <span>Open Home mobile app is coming soon!</span>
                    </div>
                </div>
            </div>
        );
    }
}

export default withRouter(MobileComponent);

import React，{Component}来自'React'；
从“react router dom”导入{withRouter}；
类MobileComponent扩展了组件{
render（）{
返回(
开放家庭移动应用即将推出！
);
}
}
使用路由器导出默认值（MobileComponent）；

我如何解决这个问题？

您有以下逻辑：

函数checkMobile（）{
如果（窗口.屏幕.宽度<768）{
返回
}
}
checkMobile（）；

这不会在渲染

所需的

render（）代码中执行。即使它执行，您也会返回标记，但它不可能进入渲染位置

因此，最好的方法是设置一个状态：

函数checkMobile（）{
如果（窗口.屏幕.宽度<768）{
这是我的国家({
重定向：
});
}
}
componentDidMount（）{
checkMobile（）；
}

在
render（）
函数中：

render（）{
返回(
{this.state.redirect}
{/*后面跟着其他代码*/}
);
}

默认情况下，您可以在状态下将
重定向
初始化为
空
，或者不需要，因为这不会造成任何伤害。如果已设置，则会呈现
标记，重定向用户。
这是否回答了您的问题@不@对不起，我根本不想大喊大叫。你对这个问题有什么答案吗？不用担心，也不用冒犯，我已经回答并解决了。大卫，这个答案对你有用吗？这意味着我需要将整个组件转换成一个类，对吗？@DavidJohns不需要。如果它是一个功能组件，你能用路由器（FuncComponent）

将它包装起来吗？如果可能的话，那么您可以在函数中使用

props.history.push（“/mobile”）

。实际上我在代码中提到的index.js中尝试了

props.history.push（“/mobile”）

，但是这里没有定义道具。我认为该组件既不是功能组件，也不是功能组件component@DavidJohns我刚才提到过，在任何事情之前使用路由器（FuncComponent）的

和
常量FuncComponent=（props）=>{…}
@DavidJohns。你的代码完全错了。如果这不是问题的完整代码，请出示完整代码好吗？功能组件中没有
render（）
函数。