Блог

Я хочу переключаться между компонентами для «тела» моего приложения.
пытаюсь создать приложение для моего веб-сайта.

я перепробовал много способов (кроме react-router или Gatsby) и потерпел сокрушительную неудачу. Я нахожусь в точке, где не выдается сообщение об ошибке, но не отображается ничего, кроме моего состояния.

Я хочу переключить «тело» с помощью кнопки заголовка, имея router.js обрабатывать / отображать разные компоненты.

app.js

 import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import Header from './Components/header.js';
import Router from './Components/router.js';
import Footer from './Components/footer.js';


class App extends React.Component {
  render() {
  return (
    <div className="App">
     <Header />
     <Router />
     <Footer />
    </div>
    );
  }
}

export default App;
  

router.js

 import React from 'react';
import Header, { onClick } from './header.js';
import Main from './main.js';
import About from './about.js';

class Router extends React.Component { 
    constructor(props) {
    super(props);

    this.state = { page: <Main /> };
    
    this.changePage = this.changePage.bind(this);
  }
  changePage(newPage) {
    this.setState({
      page: newPage
    });
  }
    render() {
      return (
        <section className="Router">
          <div>{this.state.page} <a onClick={this.changePage}></a></div>
        </section>
      );
    }
}

export default Router;
  

header.js

 import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';

class Header extends React.Component {
  constructor(props) {
    super(props);
    
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    const page = e.target.value;
    return ({ page: (e) });
  }
  render() { 
    return(
      <div className="Header">
        <nav className="navbar navbar-expand-lg navbar-light" style={{backgroundColor: '#504C5E', color: '#A89B34'}}>
          
          <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon color-black"></span>
          </button>
          <div className="col-12 collapse navbar-collapse my-2" id="navbarSupportedContent">
            <ul className="navbar-nav col-10">
              <li className="nav-item active col-2">
                <button onClick={this.handleChange} value="main">Home<span className="sr-only">(current)</span></button>
              </li>
              <li className="nav-item col-2">
                <button onClick={this.handleChange} value="<About />">About Me</button>
              </li>
              <li className="nav-item col-2">
                <button>Education</button>
              </li>
              <li className="nav-item col-2">
                <button>Experience</button>
              </li>
              <li className="nav-item col-2">
                <button>Projects</button>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    );
  }
}

export default Header;