Render a component according to the state of another component

I'm doing an app that needs to validate a Login to enter another component. For now it only sends an alert when it is correctly logged and changes the state of the component Log In to loggedIn = true; But I do not know how to do that, in addition, to the other component, it is to dedicate, change the route.

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Game from './screens/Game';
import RegisterFormContainer from './screens/Form/index';

class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={LogIn} />
          <Route path="/home" component={HomeLoggeado} />
        </Switch>
      </Router>
    );
  }
}

export default App;

The Login component has a state that changes to true when it is logged in, ie it has a Submit button, validates the user and the pass and indicates that the loggin is ok, but I do not know how to make the other component know and go to renderearse. I access the home if I put / home, logically, but it does not validate if it is logged