War auf der Suche nach der gleichen Art von Problem. Am Ende habe ich eine Mischung der oben beschriebenen Lösungsvorschläge verwendet.
Erstens habe ich einen S3-Bucket mit mehreren Ordnern, wobei jeder Ordner eine React / Redux-Website darstellt. Ich benutze Cloudfront auch für die Cache-Ungültigmachung.
Also musste ich Routing-Regeln zur Unterstützung von 404 verwenden und sie in eine Hash-Konfiguration umleiten:
<RoutingRules>
<RoutingRule>
<Condition>
<KeyPrefixEquals>website1/</KeyPrefixEquals>
<HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
</Condition>
<Redirect>
<Protocol>https</Protocol>
<HostName>my.host.com</HostName>
<ReplaceKeyPrefixWith>website1#</ReplaceKeyPrefixWith>
</Redirect>
</RoutingRule>
<RoutingRule>
<Condition>
<KeyPrefixEquals>website2/</KeyPrefixEquals>
<HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
</Condition>
<Redirect>
<Protocol>https</Protocol>
<HostName>my.host.com</HostName>
<ReplaceKeyPrefixWith>website2#</ReplaceKeyPrefixWith>
</Redirect>
</RoutingRule>
<RoutingRule>
<Condition>
<KeyPrefixEquals>website3/</KeyPrefixEquals>
<HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
</Condition>
<Redirect>
<Protocol>https</Protocol>
<HostName>my.host.com</HostName>
<ReplaceKeyPrefixWith>website3#</ReplaceKeyPrefixWith>
</Redirect>
</RoutingRule>
</RoutingRules>
In meinem js-Code musste ich mit einer baseNameKonfiguration für den React -Router umgehen . Stellen Sie zunächst sicher, dass Ihre Abhängigkeiten interoperabel sind. Ich hatte sie installiert history==4.0.0, mit denen sie nicht kompatibel war react-router==3.0.1.
Meine Abhängigkeiten sind:
- "Geschichte": "3.2.0",
- "reagieren": "15.4.1",
- "React-Redux": "4.4.6",
- "React-Router": "3.0.1",
- "React-Router-Redux": "4.0.7",
Ich habe eine history.jsDatei zum Laden des Verlaufs erstellt:
import {useRouterHistory} from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';
export const browserHistory = useRouterHistory(createBrowserHistory)({
basename: '/website1/',
});
browserHistory.listen((location) => {
const path = (/#(.*)$/.exec(location.hash) || [])[1];
if (path) {
browserHistory.replace(path);
}
});
export default browserHistory;
Mit diesem Code können Sie die vom Server gesendeten 404 mit einem Hash behandeln und diese im Verlauf ersetzen, um unsere Routen zu laden.
Sie können diese Datei jetzt zum Konfigurieren Ihres Geschäfts und Ihrer Root-Datei verwenden.
import {routerMiddleware} from 'react-router-redux';
import {applyMiddleware, compose} from 'redux';
import rootSaga from '../sagas';
import rootReducer from '../reducers';
import {createInjectSagasStore, sagaMiddleware} from './redux-sagas-injector';
import {browserHistory} from '../history';
export default function configureStore(initialState) {
const enhancers = [
applyMiddleware(
sagaMiddleware,
routerMiddleware(browserHistory),
)];
return createInjectSagasStore(rootReducer, rootSaga, initialState, compose(...enhancers));
}
import React, {PropTypes} from 'react';
import {Provider} from 'react-redux';
import {Router} from 'react-router';
import {syncHistoryWithStore} from 'react-router-redux';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import variables from '!!sass-variable-loader!../../../css/variables/variables.prod.scss';
import routesFactory from '../routes';
import {browserHistory} from '../history';
const muiTheme = getMuiTheme({
palette: {
primary1Color: variables.baseColor,
},
});
const Root = ({store}) => {
const history = syncHistoryWithStore(browserHistory, store);
const routes = routesFactory(store);
return (
<Provider {...{store}}>
<MuiThemeProvider muiTheme={muiTheme}>
<Router {...{history, routes}} />
</MuiThemeProvider>
</Provider>
);
};
Root.propTypes = {
store: PropTypes.shape({}).isRequired,
};
export default Root;
Ich hoffe es hilft. Sie werden feststellen, dass ich bei dieser Konfiguration einen Redux-Injektor und einen Homebrew-Sagas-Injektor verwende, um Javascript asynchron über das Routing zu laden. Kümmere dich nicht um diese Zeilen.
