AngularJS 1.5.8+ui-router 0.3.1：URL哈希段斜杠不编码配置方案

针对AngularJS 1.5.8 + angular-ui-router 0.3.1环境下，HTML5路由模式与React HashRouter共存时，AngularJS自动编码哈希段斜杠导致React路由无法匹配的问题，提供以下三种无需升级框架的配置方案：

方案一：修改AngularJS的哈希编码规则 #

直接通过$locationProvider自定义哈希段的编码逻辑，保留斜杠不被转义，从根源解决编码问题：

angular.module('yourApp', ['ui.router'])
  .config(['$locationProvider', function($locationProvider) {
    // 启用HTML5路由模式，根据实际需求设置requireBase
    $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
    });
    $locationProvider.hashPrefix('');
    
    // 自定义哈希编码函数，仅转义必要字符，保留斜杠
    $locationProvider.encodeHashSegment = function(value) {
      return encodeURIComponent(value).replace(/%2F/g, '/');
    };
    
    // 对应的解码函数确保正常解析
    $locationProvider.decodeHashSegment = function(value) {
      return decodeURIComponent(value);
    };
  }]);

优点：全局生效，无需修改React代码；缺点：会改变整个AngularJS应用的哈希编码行为，需确认其他路由不受影响。

方案二：在React端解码哈希路径 #

在React应用初始化时手动解码哈希，并监听哈希变化防止重复编码，仅对React路由生效：

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter, Route, Switch } from 'react-router-dom';
import MyComponent from './MyComponent';

// 解码哈希中的转义斜杠
const fixHash = () => {
  const currentHash = window.location.hash;
  if (currentHash.includes('%2F')) {
    window.location.hash = decodeURIComponent(currentHash);
  }
};

// 初始化时修正哈希
fixHash();
// 监听哈希变化，实时修正
window.addEventListener('hashchange', fixHash);

ReactDOM.render(
  <HashRouter>
    <Switch>
      <Route path="/react/route/:id" component={MyComponent} />
      {/* 其他React路由配置 */}
    </Switch>
  </HashRouter>,
  document.getElementById('react-root')
);

优点：不影响AngularJS原有逻辑，仅针对React应用处理；缺点：若AngularJS在运行中再次修改哈希，需额外处理冲突。

方案三：通过ui-router路由钩子修正哈希 #

针对嵌入React的特定AngularJS路由，在状态进入时手动修正哈希，精准控制影响范围：

angular.module('yourApp')
  .config(['$stateProvider', function($stateProvider) {
    $stateProvider.state('angularroute', {
      url: '/angularroute',
      template: '<div id="react-root"></div>',
      onEnter: ['$window', function($window) {
        const hash = $window.location.hash;
        // 检测是否存在编码后的斜杠，若有则解码
        if (hash.startsWith('#%2F')) {
          $window.location.hash = decodeURIComponent(hash);
        }
      }]
    });
  }]);

优点：仅对指定路由生效，影响范围最小；缺点：若有多个嵌入React的路由，需重复配置钩子。

内容的提问来源于stack exchange，提问作者Victor