React redirect to mobile site

user_17074392 0
Viewed 615

On my react app I need to redirect mobile users to the mobile site. When someone goes to my url for example: example.com, if they are on mobile, I need the url to redirect to mobile.example.com. I havent found any good articles on file structures for a react app like this that has a mobile view and a desktop view. I also need to test it on localhost. I am using react-router-dom for routing as well couldnt find anything on changing the baseurl to mobile either.

reactjs
2 Answers

I Suggest you check this out https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent. These days , most websites are single page apps and are built to work on both device types (it's a little more elegant), but you can try and divine it by measuring screen width, user agent and so on

To answer your comment, you could do something like

if (navigator.userAgent.contains('....your mobile user agent type') 
{
location.replace('http://m.mymobilesite.com')
}
user_18014030

If you are using Apache you can check this post:
Check mobile device in apache and redirect to mobile website

If you are using Node you can use Apache as proxy and redirect to your Node server

To answer to your comment you can just use this library:
https://www.npmjs.com/package/react-device-detect

import { isMobile } from 'react-device-detect';
import  { Redirect } from 'react-router-dom';

//...

export default class App extends Component {
    //...
    render() {
        return isMobile ? <Redirect to='mobile-site'/> : <Redirect to='desktop-site'/>
    }
}

user_150389000
Related