Всем доброго времени суток.
Я использую react-router^4.2.0, react-router-redux^5.0.0-alpha.6 и redux^3.7.2
Мне нужно реализовать вложенные маршруты. Суть в том, что у меня есть настройки, а в настройках будет два подраздела.
Роутинг работает замечательно, пока не была поставлена задача организовать сложенные маршруты
Ниже код index.js
import React from 'react';
import {render} from 'react-dom';
import {Provider, connect} from 'react-redux';
import {ConnectedRouter} from 'react-router-redux';
import createHistory from 'history/createBrowserHistory';
import configureStore from './store/configureStore';
// Container
import ApplicationContainer from './containers/ApplicationContainer';
// create history and store
const history = createHistory();
const store = configureStore(history);
const Application = connect(state => ({
location: state.routerReducer.location
}))(ApplicationContainer);
render(
<Provider store={store}>
<ConnectedRouter history={history}>
<Application/>
</ConnectedRouter>
</Provider>,
document.getElementById('app'),
);
Всё приложение оборачивается в ConnectedRouter куда поступает history
Это код компонента ApplicationContainer:
import React from 'react';
import {Switch, Route} from 'react-router';
import {connect} from 'react-redux';
// service components
import HeaderContainer from './HeaderContainer';
import Message from '../components/Message';
// content components
import SettingsContainer from './SettingsContainer';
const ConnectedSwitch = connect(state => ({
location: state.routerReducer.location
}))(Switch);
const AppContent = ({location, error}) => (
<div className="all-wrapper">
<div className="main-content">
<ConnectedSwitch>
<Route exact path='/settings' component={SettingsContainer}/>
</ConnectedSwitch>
</div>
</div>
);
const ApplicationContainer = () => (
<div className="component-app">
<Message/>
<HeaderContainer/>
<AppContent/>
</div>
);
const mapStateToProps = state => ({
message: state.messageReducer.haveMessage
});
export default connect(mapStateToProps)(ApplicationContainer);
В SettingContainer я использую ф-цию connect и свойства пихаю в SettingsWrapper, где и прописываю вложенные маршруты
import React, {Component} from "react";
import {
Route,
Link
} from 'react-router-dom'
class SettingsWrapper extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<ul className="content-menu">
<li className="content-menu__item active"><Link to={`${this.props.match.url}/invoices`}>Счета</Link></li>
<li className="content-menu__item"><Link to={`${this.props.match.url}/meters`}>Показания счётчиков</Link></li>
</ul>
<Route path={`${this.props.match.url}/invoices`} render={() => <h2>Invoices</h2>}/>
<Route path={`${this.props.match.url}/meters`} render={() => <h2>Meters</h2>}/>
</div>
)
}
}
export default SettingsWrapper;
Когда хожу по ссылкам в SettingsWrapper, то у меня всё стирается со страницы
Подскажите, в чём дело, пожалуйста
Простой