Как собрать React Router так, чтобы у мобильного и десктопного приложения были разные скрины?

Question

[livesega]

Приложение собирается в два файла: mobile.js и desktop.js. По большей части они различаются скринами, в то время как роуты всегда должны совпадать, отсюда вопрос: как организовать файл с роутами так, чтобы роуты были одни и теже для обеих версий приложения, в то время как скрины импортировались из разных папок mobile/desktop?

PS routes подключаются отдельно к файлу с десктопной версией и мобильной.

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

[Максим]

В component ставьте значение в зависимости от переменной окружения.
Например, сборка:
ENV_DEVICE=mobile webpack ...

в конфиге вебпака (пример для старого вебпака):

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

в коде:

<Route path="/welcome" component={ ENV_DEVICE === 'mobile' ? <CompnentA /> : <ComponentB />} />

Код для примера привел, но суть такая: вытащить переменную окружения и сделать развилку для компонента (если не будет работать тернарный оператор, можно через render={} роута, и внутри рендера уже условие)