Почему не работают вложенные маршруты в React приложении?

Question

[Анастасия Панфилова]

Всем доброго времени суток.
Я использую 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, то у меня всё стирается со страницы
Подскажите, в чём дело, пожалуйста

Answer 1

[Антон Спирин]

У вас роут /settings со свойством exact. Роуты с этим свойством срабатывают только при точном совпадении маршрута. Уберите его и все будет работать.