Why are nested routes not working in a React app?

Question

React

Good day to all.
I am using react-router^4.2.0, react-router-redux^5.0.0-alpha.6 and redux^3.7.2
I need to implement nested routes. The bottom line is that I have settings, and in the settings there will be two subsections.
Routing works fine, until the task was set to organize stacked routes
Below is the index.js code

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'),
);

The whole application is wrapped in a ConnectedRouter where history comes in
. This is the code of the ApplicationContainer component:

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);

In the SettingContainer, I use the connect function and shove the properties into the SettingsWrapper, where I write nested routes

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;

When I follow the links in the SettingsWrapper, everything is erased from the page
. Tell me what's wrong, please

Answer 1

You have a /settings route with an exact property . Routes with this property fire only if the route matches exactly. Remove it and everything will work.