reactjs - React - 在宽屏上显示所有路线，但在移动设备上只显示一条

Question

我正在开发一个应用程序，其中三个组件在列中彼此相邻（笔记本电脑屏幕）。在移动设备上，我只希望一个组件可见，并带有一个小导航来在三个组件之间切换。

我已经尝试了一些解决方案，最新的是：我在高于 800 像素的窗口上将组件彼此相邻，但在屏幕宽度 < 800 像素的开关中。这似乎不是最佳解决方案，因为我必须在移动设备上考虑路线，而不是在更宽的屏幕上。

我尝试过的虚拟代码示例：

{windowWidth < 800 &&
    <nav><Link 1> <Link 2> <Link 3></nav>
    <Switch>
        <Route1><Component 1/></Route1>
        <Route2><Component 2/></Route2>
        <Route3><Component 3/></Route3>
    </Switch>
}
{windowWidth > 800 &&
    <div (flex-row styling) >
        <Component 1/>
        <Component 2/>
        <Component 3/>
    </div>
}

简而言之：有没有更好的方法在宽屏上显示彼此相邻的路线中的 3 个组件，但在移动设备上只显示一个？

标签： reactjslayoutroutesresponsive