Render components according to route

Question

I am developing an application with React. I have the index.jsx file below:

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';

import { store } from './_helpers';
import { App } from './App';


render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('app')
);

Which renders the App component to the div with app id, which is in index.html. Ok, I also have in this application a login component that is rendered through routes, works perfectly, however, after logged in, the user enters the Home component, where there is a menu that I would like that when an item is clickado, it renders this other component inside a div in the home component. How can I do that? I think it’s not with state, because that would invalidate the routes, or I’m wrong?

Edit 1 = Showing the app.jsx

import React from 'react';
import { Router, Route } from 'react-router-dom';
import { connect } from 'react-redux';

import { history } from '../_helpers';
import { alertActions } from '../_actions';
import { PrivateRoute } from '../_components';
import { HomePage } from '../HomePage';
import { Timesheet } from "../Timesheet";
import { LoginPage } from '../LoginPage';
import { RegisterPage } from '../RegisterPage';

class App extends React.Component {
    constructor(props) {
        super(props);

        const { dispatch } = this.props;
        history.listen((location, action) => {
            // clear alert on location change
            dispatch(alertActions.clear());
        });
    }

    render() {
        const { alert } = this.props;
        return (

                <Router history={history}>
                    <div>
                        <PrivateRoute exact path="/" component={HomePage} />
                        <PrivateRoute exact path="/timesheet" component={Timesheet} />
                        <Route path="/login" component={LoginPage} />
                        <Route path="/register" component={RegisterPage} />
                    </div>
                </Router>
        );
    }
}

function mapStateToProps(state) {
    const { alert } = state;
    return {
        alert
    };
}

const connectedApp = connect(mapStateToProps)(App);
export { connectedApp as App }; 

Answer 1

You must use ReactDOM.render() not only to render the Root element, but for all insertion of components, except if Voce is using Server Side Rendering.

import React from 'react';
import ReactDOM from 'react-dom';

const PrivateComponent = (props) => {
    return(
        <h1>Eba, usuario logado clicou lá.</h1>
    );
}

class Menu extends React.Component {
    handleClick = () => {
        let logged = this.props.user.logged;
        if (!logged) {
            //se nao estiver logado, nada é renderizado;
            return;
        }

        ReactDom.render(<PrivateComponent/>, document.querySelector(".target"));
    }
    render()
    {
        return (
            <nav>
                //lá vai verificar se está logado ou nao
                <span onClick={this.handleClick}></span>

                //se estiver logado vai cair aqui o seu component
                <div className{"target"}></div>
            </nav>
        );
    }
}

class Home extends React.Component
{
    render()
    {
        return (
            <header>Nosso website</header>

            <Menu user={{logged: true}} />

            <main>Nosso artigo fantástico</main>

            <footer>Créditos á....</footer>
        );
    }
}