접선이지만 S3에서 호스팅하려는 (HTML5) 브라우저 기록이있는 Rackt의 React Router 라이브러리 를 사용하는 사람들을위한 팁이 있습니다.

사용자가 방문하는 가정 /foo/bear하여 S3 호스팅 정적 웹 사이트를. David의 초기 제안을 감안할 때 리디렉션 규칙은로 보냅니다 /#/foo/bear. 응용 프로그램이 브라우저 기록을 사용하여 빌드 된 경우 별다른 효과가 없습니다. 그러나이 시점에서 애플리케이션이로드되어 이제 히스토리를 조작 할 수 있습니다.

프로젝트에 Rackt 히스토리 를 포함하여 ( React Router 프로젝트에서 사용자 정의 히스토리 사용 참조 ) 해시 히스토리 경로를 인식하는 리스너를 추가하고 다음 예에 표시된대로 경로를 적절하게 대체 할 수 있습니다.

import ReactDOM from 'react-dom';

/* Application-specific details. */
const route = {};

import { Router, useRouterHistory } from 'react-router';
import { createHistory } from 'history';

const history = useRouterHistory(createHistory)();

history.listen(function (location) {
  const path = (/#(\/.*)$/.exec(location.hash) || [])[1];
  if (path) history.replace(path);
});

ReactDOM.render(
  <Router history={history} routes={route}/>,
  document.body.appendChild(document.createElement('div'))
);

요약하자면:

1. David의 S3 리디렉션 규칙이로 연결 /foo/bear됩니다 /#/foo/bear.
2. 응용 프로그램이로드됩니다.
3. 히스토리 리스너는 #/foo/bear히스토리 표기법 을 감지합니다 .
4. 그리고 역사를 올바른 경로로 바꾸십시오.

Link태그 는 다른 모든 브라우저 기록 기능과 마찬가지로 예상대로 작동합니다. 내가 알아 차린 유일한 단점은 초기 요청에서 발생하는 전면 광고 리디렉션입니다.

이것은 AngularJS 솔루션 에서 영감을 얻었으며 모든 응용 프로그램에 쉽게 적용 할 수 있다고 생각합니다.

답변

<RoutingRules>
    <RoutingRule>
        <Condition>
            <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
        </Condition>
        <Redirect>
            <HostName>subdomain.domain.fr</HostName>
            <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
        </Redirect>
    </RoutingRule>
</RoutingRules>

$locationProvider.html5Mode(true).hashPrefix('!');