Why not work for nested routes in a React app?

All kind time of day.
I use 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 point is that I have settings, and in settings there will be two subsections.
The routing works great, until I was tasked to organize folded routes

Code below 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
ApplicationContainer import from './containers/ApplicationContainer';

// create and store history
const history = createHistory();
const store = configureStore(history);

const Application = connect(state => ({
 location: state.routerReducer.location
}))(ApplicationContainer);

render(
 <provider store="{store}">
 <connectedrouter history="{history}">
<application>
</application></connectedrouter>
</provider>,
document.getElementById('app'),
);


The whole application is wrapped in ConnectedRouter where history comes
This is the code of the component ApplicationContainer:
import React from 'react';
import {Switch, Route} from 'react-router';
import {connect} from 'react-redux';

// service components
HeaderContainer import 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}/">
</route></connectedswitch>
</div>
</div>
);

ApplicationContainer const = () => (
 <div classname="component-app">
<message>
<headercontainer>
<appcontent>
</appcontent></headercontainer></message></div>
);

const mapStateToProps = state => ({
 message: state.messageReducer.haveMessage
});

export default connect(mapStateToProps)(ApplicationContainer);


In SettingContainer I use of f-tion properties connect and shoved in SettingsWrapper where and prescribe nested routes
import React {Component} from "react";
import {
Route
Link
} from 'react-router-dom'

SettingsWrapper class extends Component {

 constructor(props) {
super(props);
}

 render() {
 return (
the <div>
 <ul classname="content-menu">
 <li classname="content-menu__item active"><link to="{`${this.props.match.url}/invoices`}">Invoices</li>
 <li classname="content-menu__item"><link to="{`${this.props.match.url}/meters`}">meter Readings</li>
</ul>
 <route path="{`${this.props.match.url}/invoices`}" render="{()" => <h2>Invoices</h2>}/>
 <route path="{`${this.props.match.url}/meters`}" render="{()" => <h2>Meters</h2>}/>
</route></route></div>
)
}
}

export default SettingsWrapper;


When I go on the links in SettingsWrapper, I have all erased from the page
Tell me, what's the matter, please
June 8th 19 at 16:39
1 answer
June 8th 19 at 16:41
Solution
You have a route /settings with the property of exact. Ranting with this property work only the exact match of the route. Remove it and everything will work.

Find more questions by tags ReduxReact