Как я могу переключаться между двумя компонентами реагирования на одной странице? ⇐ CSS

[Anonymous]

Я пытаюсь создать страницу входа и регистрации в React Js, идея состоит в том, что они должны отображаться на одной странице, и пользователь должен иметь возможность переключаться между ними (что-то вроде этого примера: https: //codepen.io/guycode/pen/VwaKVrb)
Я создаю функцию переключения, и переключение между двумя режимами работает, но проблема в том, что когда я переключаюсь в режим регистрации, URL-адрес все еще " /Login» и еще одна большая проблема: стиль и внешний вид страницы перестают работать должным образом. Хотя, когда регистрация и вход в режим буксировки разделены без режима переключения, стиль работает отлично

Код: Выделить всё

import UserServices from '../Services/service';
import img1 from '../pages/students.png';
import img2 from '../pages/students2.png';
import React, { useState } from "react";
import toast, {Toaster} from 'react-hot-toast';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {faCircleExclamation} from '@fortawesome/free-solid-svg-icons';

const Signup = () => {

const [firstName , setfirstName] = useState('')
const [lastName , setlastName] = useState('')
const [birthday , setbirthday] = useState('')
const [password , setpassword] = useState('')
const [email , setemail] = useState('')
const [errors , setErrors] = useState(
{
firstName : '',
lastName : '',
email : '',
password : '',
birthday : '',

});

const formValidation = () =>{
const pattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[@$!%*?&])[A-Za-z0-9@$!%*?&]{8,}$/;

let localErrors = {...errors}
if(firstName === ""){
localErrors.firstName = 'First name required';
}
if(lastName === ""){
localErrors.lastName = 'Last name required';
}
if(email === ""){
localErrors.email = 'Email required';
}
if ((password === "") || (!pattern.test(password))){
localErrors.password = 'Password required';
}
if(birthday === ""){
localErrors.birthday = 'date required';
}

setErrors(localErrors);
console.log(localErrors);

const isValid = Object.values(localErrors).every(error => error === '');
return isValid;

}

const signUp = async (e) =>{
e.preventDefault();

if (formValidation()){
const data = {
firstName : firstName,
lastName : lastName,
email : email,
password : password,
birthday : birthday,
}

try {
const response = await UserServices.signup(data)
console.log("response ====>", response);
toast.success('Successfully created!');
setfirstName('');
setlastName('');
setemail('');
setpassword('');
setbirthday('');

}catch(err){
console.log(err)
toast.success('Successfully created!');

}

}else{
console.log("form invalid");
}
}

return (





Sign up

[i][/i]
[i]setfirstName(e.target.value)}/>
{errors.firstName !== '' && (


{errors.firstName}

)}



[/i]
[i]setlastName(e.target.value)}/>
{errors.lastName !== '' &&  (


{errors.lastName}

)}


[/i]
[i]setemail(e.target.value)} />
{errors.email !== '' && (


{errors.email}

)}


[/i]
[i]setpassword(e.target.value)} />
{errors.password !== '' && (


{errors.password}

)}


[/i]
[i]setbirthday(e.target.value)}/>
{errors.birthday !== '' && (


{errors.birthday}

)}









New in our faClub ?
Enter your personal details and start journey with us.
Sign up

[img]{img1} class=[/img]



One of our faClub ?
To keep connected with us please login with your personal info.
Sign in

[img]{img2} class=[/img]




)

}
export default Signup

import UserServices from '../Services/service';
import img1 from '../pages/students.png';
import img2 from '../pages/students2.png';
import React, { useState } from "react";
import toast, {Toaster} from 'react-hot-toast';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {faCircleExclamation} from '@fortawesome/free-solid-svg-icons';

const SignIn = () => {
const [password , setpassword] = useState('')
const [email , setemail] = useState('')
const [errors , setErrors] = useState(
{
email : '',
password : '',

});

const formValidation = () =>{
const pattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[@$!%*?&])[A-Za-z0-9@$!%*?&]{8,}$/;

let localErrors = {...errors}
if(email === ""){
localErrors.email = 'Email required';
}
if ((password === "") || (!pattern.test(password))){
localErrors.password = 'Password required';
}

setErrors(localErrors);

const isValid = Object.values(localErrors).every(error =>  error === '');
return isValid;

}

const signin = async (e) =>{
e.preventDefault();
console.log("forme submitted");

if (formValidation()){
const data = {
email : email,
password : password,
}

try {
const response = await UserServices.signin(data)
console.log("response ====>", response);
toast.success('Successfully Loget in!');
setemail('');
setpassword('');

}catch(err){
console.log(err)
toast.success('Successfully created!');

}

}else{
console.log("forme invalid")

}
}

return (





Sign in

[/i]
[i]setemail(e.target.value)}/>
{errors.email !== '' && (


{errors.email}

)}


[/i]
setpassword(e.target.value)} />
{errors.password !== '' && (


{errors.password}

)}








New in our faClub ?
Enter your personal details and start journey with us.
Sign up

[img]{img1} class=[/img]



One of our faClub ?
To keep connected with us please login with your personal info.
Sign in

[img]{img2} class=[/img]




)

}

export default SignIn;

import './App.css';
import Signup from './pages/signup.js';
import SignIn from './pages/login.js';
import img1 from '../src/pages/students.png';
import img2 from '../src/pages/students2.png';

import { useState } from 'react';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

function App() {
const [isSignUpMode, setIsSignUpMode] = useState(false);

const toggleMode = () => {
setIsSignUpMode(prevMode => !prevMode);
};
return (


{isSignUpMode ?   : }



New in our faClub ?
Enter your personal details and start journey with us.
Sign up

[img]{img1} className=[/img]



One of our faClub ?
To keep connected with us please login with your personal info.
Sign in

[img]{img2} className=[/img]



)}

export default App;

import express from 'express';
import { signup } from '../controllers/user.controller.js';
import { signin } from '../controllers/user.controller.js';
const router = express.Router();
router.post('/signup' ,signup );
router.post('/login',signin);

export {router};

в App.css нет проблем

Подробнее здесь: https://stackoverflow.com/questions/784 ... -same-page