2
ほとんどの場合、react-boilerplateに基づいてアプリを作成しました。react-router-redux：2回目のルート変更後に履歴を更新しません
ただし、LOCATION_CHANGE還元アクションを使用して2番目のルートを変更した後、何らかの理由で履歴オブジェクトが新しい場所で更新されません。
URLは新しい場所と一致するように変更され、reduxストアはルート変更を反映するように更新されますが、履歴オブジェクトは現在の場所として以前の場所を表示します。私は今この問題を数日間解決しようとしており、私はそれが私が完全に見落としていることは自明であると確信しています。
export function createRoutes(store) {
// create reusable async injectors using getAsyncInjectors factory
const { injectReducer, injectSagas } = getAsyncInjectors(store);
// injectReducer('global', globalReducer);
injectSagas(globalSagas);
let routes = [
{
path: '/',
name: 'dashboard',
getComponent(nextState, cb) {
const importModules = Promise.all([
require('App/views/Main/state/reducer'),
require('App/views/Main'),
]);
const renderRoute = loadModule(cb);
importModules.then(([reducer, component]) => {
injectReducer('dashboard', reducer.default);
renderRoute(component);
});
importModules.catch(errorLoading);
},
indexRoute: {
getComponent(nextState, cb) {
const importModules = Promise.all([
require('App/views/Main/views/Posts/state/reducer'),
require('App/views/Main/views/Posts/state/sagas'),
require('App/views/Main/views/Posts'),
]);
const renderRoute = loadModule(cb);
importModules.then(([reducer, sagas, component]) => {
// injectReducer('posts', reducer.default);
// injectSagas(sagas.default);
renderRoute(component);
});
importModules.catch(errorLoading);
}
},
childRoutes: [
{
path: 'library',
name: 'library',
getComponent(nextState, cb) {
const importModules = Promise.all([
require('App/views/Main/views/MediaItemLibrary'),
]);
const renderRoute = loadModule(cb);
importModules.then(([component]) => {
renderRoute(component);
});
importModules.catch(errorLoading);
},
},
{
path: 'calendar',
name: 'calendar',
getComponent(nextState, cb) {
const importModules = Promise.all([
require('App/views/Main/views/Calendar'),
]);
const renderRoute = loadModule(cb);
importModules.then(([component]) => {
renderRoute(component);
});
importModules.catch(errorLoading);
},
}
],
},
{
path: '/start',
name: 'start',
getComponent(nextState, cb) {
const importModules = Promise.all([
require('App/views/Start'),
]);
const renderRoute = loadModule(cb);
importModules.then(([component]) => {
renderRoute(component);
});
importModules.catch(errorLoading);
},
indexRoute: {
getComponent(nextState, cb) {
const importModules = Promise.all([
require('App/views/Start/views/Login/state/reducer'),
require('App/views/Start/views/Login/state/sagas'),
require('App/views/Start/views/Login'),
]);
const renderRoute = loadModule(cb);
importModules.then(([reducer, sagas, component]) => {
// injectReducer('login', reducer.default);
// injectSagas(sagas.default);
renderRoute(component);
});
importModules.catch(errorLoading);
},
},
childRoutes: [
{
path: '/signup',
name: 'signup',
getComponent(nextState, cb) {
const importModules = Promise.all([
require('App/views/Start/views/Signup/state/reducer'),
require('App/views/Start/views/Signup/state/sagas'),
require('App/views/Start/views/Signup'),
]);
const renderRoute = loadModule(cb);
importModules.then(([reducer, sagas, component]) => {
// injectReducer('signup', reducer.default);
// injectSagas(sagas.default);
renderRoute(component);
});
importModules.catch(errorLoading);
},
}
],
}
];
return {
component: App,
//indexRoute: { onEnter: (nextState, replace) => replace('/dashboard') },
childRoutes: routes
};
}
ここでアプリへのエントリポイントがあります：これを引き起こしている可能性が何
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { applyRouterMiddleware, Router, browserHistory, createBrowserHistory } from 'react-router';
import { useScroll } from 'react-router-scroll';
import { syncHistoryWithStore } from 'react-router-redux';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
//Needed for material-ui libarry
injectTapEventPlugin();
// import sanitize css
import 'sanitize.css/sanitize.css';
import configureStore from './config.redux/store';
// import selector for 'syncHistoryWithStore'
import { makeSelectLocationState } from './config.redux/selectors';
// root app
import App from './App';
import { createRoutes} from 'config.routes/routes';
export const historyObj = browserHistory;
// create redux store with history
const initialState = {};
const store = configureStore(initialState, historyObj);
// sync history and store, as the react-router-redux reducer
const history = syncHistoryWithStore(historyObj, store, {
selectLocationState: makeSelectLocationState(),
});
const rootRoute = createRoutes(store);
ReactDOM.render(
<Provider store={store}>
<MuiThemeProvider>
<Router
history={history}
routes={rootRoute}
//render={
// Scroll to top when going to new page, imitating default browser behavior
//applyRouterMiddleware(useScroll())
// }
/>
</MuiThemeProvider>
</Provider>, document.getElementById('app')
);
任意のアイデア
は、ここに私のroutes.jsファイルですか？ありがとうございました