Đã tìm kiếm cùng một loại vấn đề. Tôi đã kết thúc bằng cách sử dụng hỗn hợp các giải pháp được đề xuất ở trên.
Đầu tiên, tôi có một thùng s3 với nhiều thư mục, mỗi thư mục đại diện cho một trang web Reac / redux. Tôi cũng sử dụng cloudfront để vô hiệu hóa bộ đệm.
Vì vậy, tôi đã phải sử dụng Quy tắc định tuyến để hỗ trợ 404 và chuyển hướng chúng đến cấu hình băm:
<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>
Trong mã js của tôi, tôi cần xử lý nó với một baseNamecấu hình cho bộ định tuyến phản ứng. Trước hết, hãy chắc chắn rằng các phần phụ thuộc của bạn có thể tương thích với nhau, tôi đã cài đặt history==4.0.0không tương thích vớireact-router==3.0.1 .
Phụ thuộc của tôi là:
- "lịch sử": "3.2.0",
- "phản ứng": "15.4.1",
- "phản ứng-redux": "4.4.6",
- "bộ định tuyến phản ứng": "3.0.1",
- "Reac-router-redux": "4.0.7",
Tôi đã tạo một history.jstệp để tải lịch sử:
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;
Đoạn mã này cho phép xử lý 404 được gửi bởi sever bằng hàm băm và thay thế chúng trong lịch sử để tải các tuyến đường của chúng tôi.
Bây giờ bạn có thể sử dụng tệp này để định cấu hình cửa hàng của mình và tệp Root của bạn.
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;
Hy vọng nó giúp. Bạn sẽ nhận thấy với cấu hình này, tôi sử dụng trình tiêm redux và trình tiêm sagas homebrew để tải javascript không đồng bộ thông qua định tuyến. Đừng bận tâm với những dòng luận văn.
