Android WebView加载React项目初始路由显示异常求助

针对你遇到的WebView加载本地React项目后初始路由为/android_asset/index.html而非根路由/的问题，提供以下几个可行方案：

方案1：改用HashRouter并直接加载根路由 #

由于本地file://协议下，BrowserRouter的路径解析会出现异常，推荐切换为Hash模式，直接指定根路由地址加载：

1. 修改React路由模式
   将项目中的BrowserRouter替换为HashRouter：

   import { HashRouter } from 'react-router-dom';
   
   ReactDOM.createRoot(document.getElementById('root')).render(
     <HashRouter>
       <App />
     </HashRouter>
   );
   

2. 更新WebView加载地址
   重新打包React项目并替换Androidassets目录下的文件后，修改Android代码：

   mywebView.loadUrl("file:///android_asset/index.html#/");
   

方案2：添加React路由重定向 #

如果不想修改路由模式，可在React路由中添加重定向规则，将初始的/android_asset/index.html路径跳转到根路由：

在路由配置中新增重定向路由（需放在所有路由最前面）：

import { Routes, Route, Navigate } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path="/android_asset/index.html" element={<Navigate to="/" replace />} />
      <Route path="/" element={<HomePage />} />
      {/* 其他页面路由 */}
    </Routes>
  );
}

重新打包替换assets文件后，保持Android端原加载代码即可。

方案3：WebView拦截初始路由（适配BrowserRouter） #

若坚持使用BrowserRouter，需通过WebView拦截初始请求并修正路径，同时确保React资源路径正确：

1. 配置React打包路径
   在package.json中设置homepage为相对路径，避免资源加载失败：

   "homepage": "./"
   

2. 自定义WebViewClient拦截路由
   修改Android代码，添加路由拦截逻辑：

   mywebView.setWebViewClient(new WebViewClient() {
       @Override
       public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
           String url = request.getUrl().toString();
           if (url.equals("file:///android_asset/index.html")) {
               view.loadUrl("file:///android_asset/");
               return true;
           }
           return super.shouldOverrideUrlLoading(view, request);
       }
   });
   

   重新打包替换assets文件后运行即可。

内容的提问来源于stack exchange，提问作者Jung Soo Choi