How to build React Router so that mobile and desktop apps have different screens?

Question

JavaScript

The application is built into two files: mobile.js and desktop.js. For the most part, they differ in screenshots, while the routes should always match, hence the question: how to organize the routes file so that the routes are the same for both versions of the application, while the screenshots are imported from different mobile/desktop folders?
PS routes are connected separately to the file with the desktop version and mobile.

import React from 'react';
import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';

import Welcome from 'screens/mobile/Welcome';
import Login from 'screens/mobile/Login';
import LoginCode from 'screens/mobile/LoginCode';
import ProfileEdit from 'screens/mobile/ProfileEdit';
import Dialogs from 'screens/mobile/Dialogs';

export default (
  <BrowserRouter>
    <Switch>
      <Route path="/verify" component={LoginCode} />
      <Route path="/welcome" component={Welcome} />
      <Route path="/profile" component={ProfileEdit} />
      <Route path="/im" component={Dialogs} />
      <Route path="/login" component={Login} />
    </Switch>
  </BrowserRouter>
);

Answer 1

In component, set the value depending on the environment variable.
For example, build:
in webpack config (example for old webpack):

plugins: [
    new webpack.DefinePlugin({
      'ENV_DEVICE': JSON.stringify(process.env.ENV_DEVICE), // вытаскиваем переменную
...

in code:
I gave the code for an example, but the essence is this: pull out the environment variable and make a fork for the component (if the ternary operator does not work, you can use the render={} of the route, and there is already a condition inside the render)