Маршрутизация в реакции с формой

Question

Я пытался создать форму, которая переводит ее из формы входа в форму регистрации, но в итоге я сделал форму регистрации вложенной формы для формы входа.

Но регистрация во вложенном маршруте не работает для меня.

В данный момент форму может подписать кто-то.Я создал пользователей с платформой Firebase, поэтому я могу войти в систему и перейти на панель мониторинга.

Мой код выглядит следующим образом:

Signin.js Форма:

import React, { Component } from 'react';

import { withRouter } from 'react-router-dom';
import { compose } from 'recompose';
import { NavLink, Link, Route, Redirect } from 'react-router-dom';
import SignupForm from '../Signup';
import Firebase from '../Firebase';
import './style.css';
import * as ROUTES from '../../constants/routes'

const INITIAL_STATE = {
    email: '',
    password: '',
    error: false,
    loading: false,
};

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

        this.state = {
            ...INITIAL_STATE
        }
    }

    onSubmit = event => {
        const { email, password, loading} = this.state;
        // const spinningLoader = <div className="spinning-loader"></div>
        event.preventDefault();
        Firebase.auth()
            .signInWithEmailAndPassword(email, password)
            .then(() => {
                this.setState({ ...INITIAL_STATE });;
                this.props.history.push(ROUTES.DASHBOARD);
            })
            .catch(error => {
                this.setState({ error });
                console.log(error)
            })
    };

    onChange = event => {
        this.setState({ [event.target.name]: event.target.value });
    };

    render() {
        const { email, password, error, loading } = this.state;

        const isInvalid = password === '' || email === '';

        return (
            <div className="background">
                <div className="form">
                    <aside className="aside">
                            <div className="sign-in">Sign In</div>
                            <img src="/images/logo.png" style={{ height: 40, width: 73.6 }} alt="" />
                    </aside>
                    <form className="form__inline">
                        <div className="email">Email</div>
                        <input 
                            name="email"
                            value={email}
                            onChange={this.onChange}
                            type="text"
                            className="input-background"
                        />
                        <div className="password">Password</div>
                        <input 
                            name="password"
                            value={password}
                            onChange={this.onChange}
                            type="password"
                            className="input-background"
                        />

                        <br />
                        <button onClick={this.onSubmit} disabled={isInvalid} type="submit" className="button">Login</button>
                        <div className="shell">
                            <div className="dont-have-an-account">Don't have an account?</div>
                            <div className="sign-up">
                                <Link exact to={ROUTES.SIGN_UP} className="">
                                    <div className="request-for-access">Request for access</div>
                                </Link>
                                <Route  
                                    exact={true}
                                    path={ROUTES.SIGN_UP}
                                    component={SignupForm}
                                />
                            </div>
                        </div>
                    </form>
                </div>
            </div>  
        )
    }
}

const SigninForm = compose(
    withRouter,
)(SigninFormBase);

export default SigninForm;```

Registration.js :

import React, { Component } from 'react';
import { withRouter, Redirect } from 'react-router-dom';
import Firebase from '../Firebase/firebase';
import * as ROUTES from '../../constants/routes';
import { compose } from 'recompose'

const INITIAL_STATE = {
  email: '',
  passwordOne: '',
  passwordTwo: '',
  isAdmin: false,
  error: null,
  // toDashboard: false,
};

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

    this.state = { ...INITIAL_STATE };
  }

  onSubmit = event => {
    const { 
       email, 
       passwordOne, 
       } = this.state;

    Firebase.auth()
      .catch(error => {
        this.setState({ error });
      });

    event.preventDefault();
  };

  onChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

  render() {
    const {
      email,
      passwordOne,
      passwordTwo,
      error,
    } = this.state;


    const isInvalid =
      passwordOne !== passwordTwo ||
      passwordOne === '' ||
      email === '';

    return (
      <section className="form">
        <input
          name="email"
          value={email}
          onChange={this.onChange}
          type="text"
          placeholder="Email Address"
          className="input-background"
        />
        <input
          name="passwordOne"
          value={passwordOne}
          onChange={this.onChange}
          type="password"
          placeholder="Password"
          className="input-background"
        />
        <input
          name="passwordTwo"
          value={passwordTwo}
          onChange={this.onChange}
          type="password"
          placeholder="Confirm Password"
          className="input-background"
        />

        <button onSubmit={this.onSubmit}  disabled={isInvalid} type="submit" className="button">
          Sign Up
        </button>

        {error && <p>{error.message}</p>}
      </section>
    );
  }
}

const SignupForm = compose(
                    withRouter,
                  )(SignupFormBase);
export default SignupForm;