Не работают вложенные маршруты внутри дочерних компонентов. Не понимаю почему. URL Link меняет, а компонент без перезагрузки страницы не рендерит. Подскажите, пожалуйста, что не так.
компонент main.js:
import 'babel-polyfill'
import React from 'react'
import ReactDOM from 'react-dom'
import {createStore, combineReducers,applyMiddleware,compose} from 'redux'
import {Provider} from 'react-redux'
import {Route, Switch,Router} from 'react-router-dom'
import { ConnectedRouter,syncHistoryWithStore, routerReducer,routerMiddleware, push } from 'react-router-redux'
import thunkMiddleware from 'redux-thunk'
import {createLogger} from 'redux-logger'
import * as reducers from './reducers/reducers'
import createHistory from 'history/createBrowserHistory'
import {connect} from 'react-redux'
import {EAction} from './reducers/actions'
import {FormAuthController} from './components/AuthForm'
import {basicLayoutController} from './components/basicLayout'
import {HomeController} from './components/Home'
import requireAuthentication from './components/requireAuth'
import {SPageController} from './components/SPage'
const loggerMiddleware = createLogger()
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
function configureStore() {
return createStore(
combineReducers({...reducers,routing: routerReducer}),
composeEnhancers(
applyMiddleware(
thunkMiddleware,
loggerMiddleware,
routerMiddleware(history)
)
)
)
if (module.hot) {
module.hot.accept('./reducers/reducers', () => {
const nextRootReducer = require('./reducers/reducers').rootReducer
store.replaceReducer(nextRootReducer)
});
}
}
export const history = createHistory();
export const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<Switch>
<Route exact path='/about' component={SPageController} />
<Route exact path='/login' component={FormAuthController} />
<Route path='/' component={requireAuthentication(basicLayoutController)} />
</Switch>
</Router>
</Provider>,
document.getElementById('content')
)
Код одного из дочерних компонентов в basicLayoutController:
import React from 'react';
import ReactDOM from 'react-dom';
import { Link, Route} from 'react-router-dom'
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {loginUpdate,passwordUpdate,reset,tryAutoFill,submit,rootFilter} from '/var/www/reactor/src/reducers/actions';
import {RubricSearch} from './rubricSearch';
import {RubricGrid} from './rubricGrid';
import {RubricAdd} from './rubricAdd';
import {HomeController} from '/var/www/reactor/src/components/Home'
class RubricS extends React.Component{
render() {
return (
<div className="col-md-6 col-xs-12 masonry-item">
<div className="panel panel-bordered">
<div className="panel-heading">
<RubricSearch />
<h3 className="panel-title"><Link to='home'>Доступные разделы</Link></h3>
</div>
<div className="panel-body">
<div className="center">
<Route path='/home' component={HomeController} />
<RubricGrid />
<RubricAdd />
</div>
</div>
</div>
</div>
);
}
}
export const RubricSection = connect(
state => ({
state:state
}),
dispatch => bindActionCreators({
rootFilter
}, dispatch)
)(RubricS);
Простой
