ReactJS sử dụng Route và form để đăng ký account và đăng nhập

import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

function Menu() {
  return (
    <div>
      <nav className="navbar navbar-expand-lg navbar-light bg-light">
        <a className="navbar-brand" href="#">My App</a>
        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarNav">
        <ul className="navbar-nav">
          <li className="nav-item active">
            <a className="nav-link" href="/">Home</a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="/register">Register</a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="#">Login</a>
          </li>
        </ul>
       </div>
     </nav>
    </div>
  );
}

export default Menu;

import React, { Component } from 'react';
import axios from 'axios';
import Menu from './Menu';

class Home extends Component {
  constructor(props) {
    super(props);

      this.state = {

      };
  }

  render() {
    return (
      <div class="container">
        <Menu />
        <h1>Welcome to My App</h1>
      </div>

    );
  }
}

export default Home;

import React, { Component } from 'react';
import axios from 'axios';
import Menu from './Menu';

class RegisterForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: '',
      email: '',
      password: '',
      password_confirmation: '',
      message: '',
      errorMessage: ''
    };
  }

  handleSubmit = (event) => {
    event.preventDefault();

    axios.post('http://localhost:8000/api/user/register', {
      name: this.state.name,
      email: this.state.email,
      password: this.state.password,
      password_confirmation: this.state.password_confirmation
    })
      .then(response => {
        this.setState({
          message: 'Account registered. Please check your email for verification instructions.'
        });
      })
      .catch(error => {
        console.error(error);
        this.setState({
          errorMessage: 'Something went wrong'
        });
      });
  }

  render() {
    return (
      <div class="container">
        <Menu />
        <form onSubmit={this.handleSubmit}>
          {this.state.message && <p className="text-success">{this.state.message}</p>}
          {this.state.errorMessage && <p className="text-error">{this.state.errorMessage}</p>}
          <div className="form-group">
            <label htmlFor="name">Name</label>
            <input type="text" className="form-control" id="name" value={this.state.name} onChange={event => this.setState({ name: event.target.value })} />
          </div>
          <div className="form-group">
            <label htmlFor="email">Email</label>
            <input type="email" className="form-control" id="email" value={this.state.email} onChange={event => this.setState({ email: event.target.value })} />
          </div>
          <div className="form-group">
            <label htmlFor="password">Password</label>
            <input type="password" className="form-control" id="password" value={this.state.password} onChange={event => this.setState({ password: event.target.value })} />
          </div>
          <div className="form-group">
            <label htmlFor="password_confirmation">Password</label>
            <input type="password" className="form-control" id="password_confirmation" value={this.state.password_confirmation} onChange={event => this.setState({ password_confirmation: event.target.value })} />
          </div>
          <button type="submit" className="btn btn-primary">Register</button>
        </form>
      </div>
    );
  }
}

export default RegisterForm;

import './App.css';
import Home from './components/Home';
import React from 'react';


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

  render() {
    return (
      <div>
        <Home />
      </div>

    );
  }
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import RegisterForm from './components/RegisterForm';

const routing = (
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="/register" element={<RegisterForm />} />
    </Routes>
  </BrowserRouter>
);
ReactDOM.render(
  routing,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();