Как рендерить разные страницы в ReactJS?

Question

[Arti-Jack]

Есть код.

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>
    );
}

Как видно из кода - я хочу по нажатию кнопки на первой страницы - перерендерить все и отрисовать вторую. Но у меня ничего не происходит. Что не так?

P.S: Если есть другой способ по нажатию кнопки рендерить другую страницу, то буду крайне рад услышать.

Answer 1

[0xD34F]

this.state = {loadworksheep: false};

this.setState({loadWorksheep: true});

Так как правильно - w должна быть большой или маленькой? Вы бы определились.

const worksheetLoaderPage = (
    WorksheetSelector
);

WorksheetSelector ---> <WorksheetSelector />

Если есть другой способ по нажатию кнопки рендерить другую страницу, то буду крайне рад услышать.

react router

Answer 2

[Роман Александрович]

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

Comments

[Arti-Jack]

К сожалению ничего не меняется, страница так и остаётся на той, которая и была

[Роман Александрович]

Arti-Jack,

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

только я не вижу у вас import startPage

Answer 3

[Максим]

Если есть другой способ по нажатию кнопки рендерить другую страницу, то буду крайне рад услышать.

Объяснение про роутинг в SPA приложениях + разбор того как устроены главные компоненты RR4.