I'm currently working on a web application with React and Material UI, which includes a registration form.
After submitting the registration form successfully, I want to display a success message at the top of the page. To ensure consistency across my site, I have included the MyAlert component at the top of every page. This component will render any messages that need to be shown to the user.
The issue I'm facing is that once the message is displayed, there's no way to hide it when navigating around the site.
I'm looking for suggestions on how to show a message once, then hide it when the user navigates to a new page until a new message needs to be displayed. Any advice on React best practices or design patterns would be greatly appreciated.
Here's a preview of my toy app:
App.jsx
// Importing necessary packages and components
import * as React from 'react'
import { useState, useEffect } from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'
import { Link } from 'react-router-dom'
// Styling and UI components
import { Alert } from '@material-ui/lab'
import MenuIcon from '@material-ui/icons/Menu'
import {
Button,
AppBar,
Toolbar,
IconButton,
Typography,
makeStyles,
Container,
} from '@material-ui/core'
// Functional Component for Navbar
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
},
}))
// Implementing Navbar and Registration Form components
...
export default App
index.jsx
// Setting up the index file to render the main App component
import * as React from "react"
import { render } from "react-dom"
import App from './App';
render(<App />, document.getElementById("app"))