如何正确使用吐司？

Question

我是Stackoverflow的新手，因此，如果“如何正确提出问题”上有错误，我深表歉意？ 我在ReactJS应用程序中面临着反应的问题。我有一个使用Spring-Boot创建的飞行管理系统API，它的工作正常（与Postman进行了测试）。我要解雇端点 - ＆gt; “乘客/注册”以发布乘客/客户详细信息。一切正常，但是当我通过Toast.Success.uccess.ting带有成功消息的tick tick时，我会获得成功的巨大。图像

app.js

import React from 'react'
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
import Header from './components/Header'
import Showcase from './components/Showcase'
import Destinations from './components/Destinations'
import Footer from './components/Footer'
import Login from './components/Login.js'
import SignUp from './components/SignUp'
import Error from './components/Error'
import { Button, Container,Row, Col} from 'reactstrap';
import {ToastContainer, toast} from "react-toastify";

function App() {
  return (
      <div>
        <ToastContainer position="top-left"/>
      
    <BrowserRouter>
      <Header />
      <Routes>
      <Route path="/" element={<><Showcase /><Destinations /></>} />
        <Route path="/login" element={<Login />}/>
        <Route path="/passengers/signup" element={<SignUp />}/>
        <Route path="*" element={<Error />}/>
      </Routes>
      <Footer />
    </BrowserRouter>
    </div>
    
  );
}

export default App

imprip.js

// import React from 'react'
import React, { Fragment, useEffect, useState } from "react";
import { Button, Form, FormGroup, Input,Container } from "reactstrap";
import axios from "axios";
import base_url from "../api/apiURL";
import { toast } from "react-toastify";

const SignUp = () => {

  useEffect(()=>{

    document.title="SignUp"

  },[])

  const [passengers, setPassenger] = useState({});
  //form handler function
  const handleForm=(e)=>{
    console.log(passengers);
    postDatatoServer(passengers);
    e.preventDefault();
  }

  //function to post signup data of passenger to server
  const postDatatoServer=(data)=>{
    axios.post(`${base_url}/passengers/signup`,data).then(
      (response) =>{
        console.log(response);
        toast.success('SignUp Successful...please login!', {
          position: "top-right",
          autoClose: 5000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          });
      },(error)=>{
        console.log(error);
        toast.error('Error! Something went wrong...please try again!', {
          position: "top-right",
          autoClose: 5000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          });
        
      }

    )
  };
  
  return (
    <>
      <section className='showcase login'>
        <div className='showcase-overlay'>
          <Form className='form-control' onSubmit={handleForm}>
          <FormGroup>
                    
                    <Input type = "text" placeholder="Username" name="username" id="username" onChange={(e)=>{
                        setPassenger({...passengers,passengerUsername:e.target.value});
                    }}/>
                </FormGroup>
                <FormGroup>
                    <Input type = "text" placeholder="Email" id="email" onChange={(e)=>{
                        setPassenger({...passengers,email:e.target.value});
                    }}/>
                </FormGroup>
                <FormGroup>
                    <Input type = "password" placeholder="Password" id="password"
                    onChange={(e)=>{
                        setPassenger({...passengers,password:e.target.value});
                    }}/>
                </FormGroup>
            {/* <input
              type='password'
              name='password'
              id='password'
              placeholder='Confirm Password'
            /> */}
            <Button type='submit'>Create Your Account</Button>
            <Button type='reset'>Clear</Button>
          </Form>
        </div>
      </section>
    </>
   
  );
}

export default SignUp;

我不将敬酒的位置放在正确的位置，或者我不把它放置在正确的位置理解。 请帮助我做到这一点，因为我是ReactJ的新手，非常感谢您。

Answer 1

请导入吐司样式文件。

import 'react-toastify/dist/ReactToastify.css';