如何从 function React JS 打开不同的页面

Question

I have two forms.

Login.jsx:

import React, {Fragment, useState } from "react";
import axios from "axios";

export const Login = (props) => {
  const [user, setUser] = useState('');
  const [pass, setPass] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    const data = {
      KorisnickoIme: user,
      Lozinka: pass
    };

    const url ='https://localhost:44357/api/Fin/Login';
    axios.post(url, data).then((result)=>{
      alert(result.data);
    }).catch((error)=>{
      alert(error);
    })
  };

  return (
    <Fragment>
    <div className="auth-form-container">
      <h2>Пријава</h2>
      <form className="login-form" onSubmit={handleSubmit}>
      <label htmlFor="user">Корисничко ме</label>
            <input value ={user} onChange ={(e) => setUser(e.target.value)}placeholder="korisnicko_ime" id="user" name="user" required/> 

        <label htmlFor="email">Лозинка</label>
        <input
          value={pass}
          onChange={(e) => setPass(e.target.value)}
          type="password"
          placeholder="********"
        ></input>
        <button type="submit">Пријави се</button>
      </form>
      <button
        className="link-btn"
        onClick={() => props.onFormSwitch("register")}
      >
        Немаш налог? Региструј се овде.
      </button>
    </div>
    </Fragment>
  );
};

and Register.jxs:

import React, {Fragment, useState} from "react";
import axios from "axios";

import { ProfileSetUp } from './ProfileSetUp';

export const Register = (props) => {
    const [email, setEmail] = useState('');
    const [pass, setPass] = useState('');
    const [name, setName] = useState('');
    const [user, setUser] = useState('');
    const [lastname, setLastname] = useState('');
    const [checkPass, setCheckPass] = useState('');

    const handleSubmit = (e) => {  
        if(pass==checkPass){
            e.preventDefault();
            const data = {
                KorisnickoIme:user,
                Ime: name,
                Prezime: lastname,
                Email: email,
                Lozinka: pass
            };

            const url ='https://localhost:44357/api/Fin/Registration';
            axios.post(url, data).then((result)=>{
                alert(result.data);
            }).catch((error)=>{
                alert(error);
            })
        }else{
            alert("Лозинке се не поклапају");
        }      

            
        }

    return(
        <Fragment>
        <div className="auth-form-container"> 
        <h2>Регистрација</h2>
        <form className="reg-form" onSubmit={handleSubmit}>
            <label htmlFor="name">Име</label>
            <input value ={name} onChange ={(e) => setName(e.target.value)}placeholder="Унесите Ваше име" id="name" name="name" required/>

            <label htmlFor="lastname">Презиме</label>
            <input value ={lastname} onChange ={(e) => setLastname(e.target.value)}placeholder="Унесите Ваше презиме" id="lastname" name="lastname" required/>

            <label htmlFor="email">Е-маил</label>
            <input value ={email} onChange ={(e) => setEmail(e.target.value)}type="email" placeholder="vasmail@fink.com" id="email" name="email" required/>

            <label htmlFor="user">Корисничко ме</label>
            <input value ={user} onChange ={(e) => setUser(e.target.value)}placeholder="Унесите Ваше korisnicko_ime" id="user" name="user" required/> 

            <label htmlFor="password">Лозинка</label>
            <input value ={pass} onChange ={(e) => setPass(e.target.value)}type="password" placeholder="********" id="password" name="password" required/>

            <label htmlFor="checkPass">Потврдите лозинку</label>
            <input value ={checkPass} onChange ={(e) => setCheckPass(e.target.value)}type="password" placeholder="********" id="checkPass" name="checkPass" required/>

            <button type="submit">Региструј се</button>
        </form>
        <button className="link-btn" onClick={() => props.onFormSwitch('login')}>Имате налог? Пријавите се.</button>
        </div>
        </Fragment>
    )
}

/*  */

After registering I want to send user to Login form but I am not sure how should I do it. Here is App.js just in case:

import React, {useState} from 'react';
import './App.css';
import { Register } from './Register';
import { Login } from './Login';
import { ProfileSetUp } from './ProfileSetUp';

function App() {
  const [currentForm, setCurrentForm] = useState('login');

  const toggleForm = (formName) => {
    setCurrentForm(formName);
  }



  return (
    <div className="App">
      {

        currentForm === "login" ? <Login onFormSwitch={toggleForm} /> : <Register onFormSwitch={toggleForm} />
      }
    </div>
  );
}
export default App;

I am not sure how React page is represented so I am not sure how to use window.open() etc. I followed one tutorial where is shown how to make this toggle switch function, which I like but I think that will make me troubles with other pages.

Answer 1

You can use the react-router package to link between different pages and pass data. Here is the documentation for the package https://reactrouter.com/en/main .

If you don't want to navigate to different components using routing, you could just use state variables to show/hide components included in a single parent component.