В React роутере, когда я нажимаю на кнопку отправить, вся страница отображается заново

Question

У меня есть эта конфигурация маршрута, и я пытаюсь отобразить компонент "aviso" при нажатии кнопки "Отправить" в компоненте Вход в систему. Я поднимаю состояние для настройки маршрута

Идея состоит в том, что, когда ai нажимает кнопку, появляется настраиваемое предупреждение и информирует пользователя, каков результат запроса. «handleAbrir» в маршруте входа в систему устанавливает состояние «handleAbrir» в маршруте. js и после отправки состояния «abrir» компоненту «Aviso», который показывает предупреждение. Я хочу, чтобы это предупреждение показывалось на каждой странице приложения.

Проблема заключается в том, что когда я нажимаю кнопку отправки в Logon, приложение отображает предупреждение, но каждый раз, когда я нажимаю кнопку, заново отображает все приложение.

Как мне предотвратить это поведение? Спасибо за помощь

маршрутов. js

import React, {useState} from 'react';
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';

import Logon from './pages/Login';
import Register from './pages/Register'; 
import Profile from './pages/Profile';
import NewIncident from './pages/NewIncidents';
import Aviso from './pages/Componentes/Aviso/index';

import {isAuthenticated} from './services/auth';

const PrivateRoute = ({component: Component, ...rest}) => (
    <Route 
        {...rest}
    render={props =>
        isAuthenticated() ? (
            <Component {...props} />
        ) : (
            <Redirect to={{ pathname: "/", state: {from: props.location}}} />
        )
    }
/>            
)

export default function Routes(){

const [mensagem, setMensagem] = useState('ola');
const [abrir, setAbrir] = useState('aviso-fechado'); 
const [tipo, setTipo] = useState();        

function handleAbrir(mens, tipo){
    setAbrir('aviso-abrir');
    setMensagem(mens);
    setTipo(tipo);
}

function handleFechar(){
    setAbrir('aviso-fechar');        
}

return (
    <BrowserRouter> 
        <Aviso mensagem={mensagem} abrir={abrir} tipo={tipo} handleFechar={handleFechar}/>                                               
        <Switch>                                             
            <Route path="/" exact component={() => <Logon handleAbrir={handleAbrir} />}/>
            <Route path="/register" component={Register} />
            <PrivateRoute path="/profile" component={Profile} />
            <PrivateRoute path="/incidents/new" component={NewIncident} />                                               
        </Switch>
    </BrowserRouter>
);
}

Компонент Aviso

import React, { useState, useContext, useEffect } from 'react';

import {AlertContext} from '../Context/index';

import './style.css';

import {TiDeleteOutline} from 'react-icons/ti';

export default function Aviso({mensagem, abrir, handleFechar, tipo}){

const [cla, setClas] = useState(abrir);     
const aviso = useContext(AlertContext);

useEffect(() => {
   setClas(abrir); 
   const i = setInterval(() => {
    handleFechar();                   
   }, 3000);
   return () => clearInterval(i);

}, [abrir, handleFechar]);    

function fechar(){
    setClas('aviso-fechar'); 
    handleFechar();                 
} 

return (

    <div className={`aviso ${cla}`} style={{backgroundColor: tipo === 1 ? aviso.alert_success : aviso.alert_failed}}>
        <TiDeleteOutline size={16} className="delete-aviso" onClick={fechar} />
        <b><p>{mensagem}</p></b>
    </div>

)
}

Компонент входа

import React, { useState } from 'react';
import {Link, useHistory} from 'react-router-dom';
import {FiLogIn} from 'react-icons/fi';

import api from '../../services/api';
import {login} from '../../services/auth';

import CarregarButton from '../Componentes/Botao/index';

import './style.css';

import logoImg from '../../assets/logo.svg';
import heroesImg from '../../assets/heroes.png';

export default function Logon({handleAbrir}){
const [id, setId] = useState('');
const [carregando, setCarregando] = useState(false);    


let history = useHistory();

async function fazerLogin(e){
    e.preventDefault();

    try{

        setCarregando(true);
        const response = await api.post('sessions', {id}); 
        setCarregando(false);           

        login(response.data.token);
        localStorage.setItem('ongId', response.data.ong.id);
        localStorage.setItem('ongName', response.data.ong.name);           

        history.push('/profile'); 

    }catch(err){ 
        setCarregando(false);
        handleAbrir('Erro de id', 2);
    } 
}

return (
    <div className="logon-container"> 

        <section className="form">
            <img src={logoImg} alt=""/>
            <form onSubmit={fazerLogin}>
                <h1>Faça seu Login</h1>
                <input 
                    placeholder="Sua ID"
                    value={id}
                    onChange={e => setId(e.target.value)}
                />
                <CarregarButton carregando={carregando} label={'Entrar'}  />
                <Link to="/register">
                    <FiLogIn size={16} color="#E02041" />
                    Não tenho cadastro
                </Link>
            </form>
        </section>
        <img src={heroesImg} alt="Heroes" className="imgL"/>
    </div>
);

}