Answer the question
In order to leave comments, you need to log in
Why don't nested routes inside child components work ( React-router 4, Redux)?
Nested routes do not work inside child components. Do not understand why. The URL Link changes, and the component does not render without reloading the page. Please tell me what is wrong.
main.js component:
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')
)
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);
Answer the question
In order to leave comments, you need to log in
And the solution is quite simple... you need to wrap connect in withRouter in the parent and child components ( https://reacttraining.com/react-router/core/guides...
How could I only forget about this...
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question