[ReactJS + electron] - fonctionnement de react router

Bonjour,

je ne comprend absolument rien a la documentation de React-routeur, voila 2 semaines que je teste du code sans parvenir a ce que je désire ... j'ai a nouveau besoin de votre aide .

je cherche a crée une application de bureau avec une authentification basique comprenant une page "login" et une autre "subscribe" sans aucun service particulier, juste un formulaire.
Si l'authentification fonctionne, l'utilisateur sera alors redirigé vers une 3eme page "home".
la page "home" comprenant un menu qui redirige vers divers autre pages ...

mais actuellement je n'ai que le routage entre la page "Sign-in" et "Sign-out" et je ne comprend pas du tout comment mettre en place le second schéma de routage.

voici mon code actuel : (toutes vos remarque me serons utile)

const Main = ({ activeSection }) => (
  <React.Fragment>
  <Welcome activeSection={activeSection} />
  <SignInClic activeSection={activeSection} />
  <SignUpClic activeSection={activeSection} />
  <SessionClic activeSection={activeSection} />
  <HomeClic activeSection={activeSection} />
  <ParamClic activeSection={activeSection} />
  </React.Fragment>
);

const MainOptions = ({ onToggle }) => (
  <div className="MainOptions">
    <button name="SignUp" onClick={onToggle}>Sign-up</button>
    <button name="SignIn" onClick={onToggle}>Sign-in</button>
  </div>
);

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeSection: "SignIn"
    };

    this.handleToggleSection = this.handleToggleSection.bind(this);
  }

  handleToggleSection(e) {
    const { name } = e.target;
    this.setState(() => ({
      activeSection: name
    }));
  }

  render() {
    return (
      <div className="App">
        <MainOptions onToggle={this.handleToggleSection} />
        <Main activeSection={this.state.activeSection} />
      </div>
    );
  }
}

export default App;

merci de votre patience et de votre aide.