React - Showing all routes on widescreen but just one on mobile

I'm working on an application where I have three components living next to each other in columns (laptop screen). On mobile I want just one component visible, with a small nav to switch between the three components.

I've tried some solutions and the latest is this: I have the components next to each other on windows higher than 800px, but in a switch with routes on screenwidth < 800px. This does not seem to be the optimal solution, as I have to take routes into account on mobile, but not on wider screens.

Dummy code example of what I tried:

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

In short: is there a better way to show 3 components in routes next to each other on widescreen but just one on mobile?