music-player/src/pages/main.js

import {Route, Redirect, Switch} from 'react-router-dom';

import {PageMain} from "./pageMain";
import {UserTracks} from "./userTracks";
import {CAllTracks} from "./allTracks";
import {CAllUsers} from "./allUsers";
import {CMyPlaylists} from "./myPlaylists";
import {CProtectedRoute,CRRoute} from "../reducers/routeReducer";
import {CSearchResult} from "./search";
import {MyPlaylistTracks} from "./myPlaylists";

export const Aside = ({children}) =>
    <div className='Aside'>
        {children}
    </div>

export const Content = ({children}) =>
    <div>
        {children}
    </div>

export const Main = () =>
    <main>
        <Aside>
            <CProtectedRoute roles={["anon", "user"]} path="/music" component={CAllUsers}/>
            <CProtectedRoute roles={["anon", "user"]} path="/user/:_id" component={CAllUsers}/>
            <CProtectedRoute roles={["anon", "user"]} path="/mymusic" component={CMyPlaylists}/>
            <CProtectedRoute roles={["anon", "user"]} path="/myplaylist/:_id" component={CMyPlaylists}/>
            <CProtectedRoute roles={["anon", "user"]} path='/' component={CAllUsers} exact/>
        </Aside>
        <Content>
            <Redirect from='/main' to='/'/>
            <Switch>
                <CProtectedRoute roles={["anon", "user"]} path="/search" component={CSearchResult}/>
                <CProtectedRoute roles={["anon", "user"]} path="/music" component={CAllTracks}/>
                <CProtectedRoute roles={["anon", "user"]} path='/' component={PageMain} exact/>
                <CProtectedRoute roles={["anon", "user"]} path="/myPlaylist/:_id" component={MyPlaylistTracks}/>
                <CProtectedRoute roles={["anon", "user"]} path="/user/:_id" component={UserTracks}/>
                <CProtectedRoute roles={["anon", "user"]} path='/mymusic' component={PageMain}/>
            </Switch>
        </Content>
   </main>