उसी तरह की समस्या की तलाश में था। मैंने ऊपर वर्णित सुझाए गए समाधानों के मिश्रण का उपयोग करके समाप्त किया।
सबसे पहले, मेरे पास कई फ़ोल्डर के साथ एक s3 बाल्टी है, प्रत्येक फ़ोल्डर एक प्रतिक्रिया / redux वेबसाइट का प्रतिनिधित्व करता है। मैं कैश अमान्यता के लिए क्लाउडफ्रंट का भी उपयोग करता हूं।
इसलिए मुझे 404 का समर्थन करने के लिए रूटिंग नियमों का उपयोग करना पड़ा और उन्हें हैश कॉन्फिगरेशन पर पुनर्निर्देशित करना पड़ा:
<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>
मेरे js कोड में, मुझे baseNameप्रतिक्रिया-राउटर के लिए एक कॉन्फिग के साथ इसे संभालने की आवश्यकता थी । सबसे पहले, सुनिश्चित करें कि आपकी निर्भरता इंटरऑपरेबल है, मैंने स्थापित किया था, history==4.0.0जिसके साथ असंगत था react-router==3.0.1।
मेरी निर्भरता हैं:
- "इतिहास": "3.2.0",
- "प्रतिक्रिया": "15.4.1",
- "प्रतिक्रिया-रिडक्स": "4.4.6",
- "प्रतिक्रिया-राउटर": "3.0.1",
- "प्रतिक्रिया-राउटर-रेडक्स": "4.0.7",
मैंने history.jsइतिहास लोड करने के लिए एक फ़ाइल बनाई है :
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;
कोड का यह टुकड़ा एक हैश के साथ गंभीर द्वारा भेजे गए 404 को संभालने की अनुमति देता है, और हमारे मार्गों को लोड करने के लिए उन्हें इतिहास में बदल देता है।
अब आप इस फाइल का उपयोग अपने स्टोर को अपने रूट फाइल को कॉन्फ़िगर करने के लिए कर सकते हैं।
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;
आशा करता हूँ की ये काम करेगा। आप इस विन्यास के साथ मुझे पता चलता है कि मैं redux इंजेक्टर और एक homebrew sagas इंजेक्टर का उपयोग रूटीन के माध्यम से जावास्क्रिप्ट लोडिंग के लिए करता हूँ। Theses लाइनों के साथ बुरा मत मानना।
