Estou desenvolvendo uma aplicação com React. Tenho o arquivo index.jsx abaixo:
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')
);
Que renderiza o componente App para a div com id app, que está no index.html. Ok, também tenho nessa aplicação um componente de login que é renderizado através de rotas, funciona perfeitamente, entretanto, depois de logado, o usuário entra no componente Home, aonde existe um menu que eu gostaria que quando um item for clickado, ele renderize este outro componente dentro de uma div no componente home. Como posso fazer isso? Creio que não seja com state, porque isso invalidaria as rotas, ou estou enganado?
Edit 1 = Mostrando o 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 };