反應重定向到移動網站

Question

在我的 React 應用程序中，我需要將移動用戶重定向到移動站點。 當有人訪問我的 url 時，例如： example.com ，如果他們在移動設備上，我需要將 url 重定向到mobile.example.com 。 我還沒有找到任何關於像這樣具有移動視圖和桌面視圖的 React 應用程序的文件結構的好文章。 我還需要在本地主機上測試它。 我正在使用react-router-dom進行路由，也找不到將 baseurl 更改為 mobile 的任何內容。

Answer 1

我建議你檢查一下https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent 。 現在，大多數網站都是單頁應用程序，並且可以在兩種設備類型上運行（它更優雅一點），但是您可以嘗試通過測量屏幕寬度、用戶代理等來判斷它

要回答您的評論，您可以執行以下操作

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

Answer 2

如果您使用的是 Apache，您可以查看這篇文章：
在 apache 中檢查移動設備並重定向到移動網站

如果您使用的是 Node，您可以使用 Apache 作為代理並重定向到您的 Node 服務器

要回答您的評論，您只需使用此庫：
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'/> } }