Approach for different HTML structure with React and using the same components

Did you try something like react-device-detect ?

https://www.npmjs.com/package/react-device-detect

You could have two different layouts like this :

<BrowserView>
  <h1> This is rendered only in browser </h1>
</BrowserView>
<MobileView>
  <h1> This is rendered only on mobile </h1>
</MobileView>

How about creating 2 render methods for your every components, one for mobile and one for desktop.

When a user enters your app, get its device info and assign global view state to 1 for mobile and 2 for desktop. After that, render your components according to your view state prop with basic conditional check.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { view: this.props.view }; // "1" or "2"
  }

  render() {
    if (this.state.view === "1") {
      return (
        // mobile ui
      );
    } else {
      return (
        // desktop ui
      );
    }
  }
}

You can find much more information about React conditional rendering at here.

One more idea: You can split your app into 2 different top components. If you are using react-router, who doesn't :), after you get user's device info, you can redirect them like this:

app.js

<Switch>
      <Route path="/" name="Redirect" component={Redirect}/>
      <Route path="/mobile" name="Redirect" component={Mobile}/>
      <Route path="/desktop" name="Redirect" component={Desktop}/>
</Switch>

Redirect Component

render() {
  if (getDeviceInfo === "1")
    return (<Redirect to={"/mobile"}/>);
  else
    return (<Redirect to={"/desktop"}/>);
}

With this way, you don't need to keep 2 different ui of your component.