How to render different pages in ReactJS?

Question

JavaScript

There is a code.
app.js

import React, { Component } from 'react';
//import logo from './logo.svg';
import './App.css';
import WorksheetSelector from './Worksheet_selector.js';

class App extends React.Component {

    constructor(props) {
        super();
        this.state = {loadworksheep: false};
this.loadStuff = this.loadStuff.bind(this)
    }

    loadStuff() {
        this.setState({loadWorksheep: true});
    }

  render() {
     /* <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div> */
     const startPage = (
         <div className="App">
             <h1>Первая страничка</h1>
            <button onClick={this.loadStuff}>Начать</button>
         </div>
    );

     const worksheetLoaderPage = (
         WorksheetSelector
     );


      return (<div>{ this.state.loadworksheep ? worksheetLoaderPage : startPage  }</div>);

  }
}

export default App;

Worksheet_selector.js

import React, { Component } from 'react';
import { render } from 'react-dom';

export default function WorksheetSelector(props) {
    return (
        <div>
            <h1>Выберите группы</h1>
            <button>Next step</button>
        </div>
    );
}

As you can see from the code - I want to re-render everything and draw the second page by pressing a button on the first page. But nothing happens to me. What's wrong?
PS: If there is another way to render another page on button click, I'll be very glad to hear it.

Answer 1

this.state = {loadworksheep: false};

this.setState({loadWorksheep: true});

So how is it right - wshould it be large or small? You would decide.

const worksheetLoaderPage = (
    WorksheetSelector
);

WorksheetSelector---><WorksheetSelector />

If there is another way to render another page on button click, I'd be very glad to hear it.

react router

Answer 2

<button onClick={()=>this.loadStuff}>Начать</button>

Answer 3

If there is another way to render another page on button click, I'd be very glad to hear it.

An explanation about routing in SPA applications + an analysis of how the main components of RR4 are arranged.

Answer 4

Try using $location.url
And try again

.then(function(user){
        if(!user){
            console.log('redirecting')
            $scope.redirect();
        }
    })

It seems to me that there should be an exception, and not just processing.