Display flash message when switching pages in React application using react-router

Tram Ho

Theory

Showing flash messages is a fairly simple task. Just a bit of code like the following example and we can complete this feature:

For the example above, the flash message will be displayed inside ExampleComponent. However, it is only displayed inside ExampleComponent with control code hidden / present in this component only. If we want the flash message to be displayed when redirecting from another component (using react-router ), such as when the data is successfully created in the input form, we redirect the page to display the list and display the data. What about displaying flash messages on this list page?

For React apps using react-router , we use them

to perform redirects to path defined in Route components (*). In addition to the path parameter above, the push function can also take another parameter, state , which is the object that contains the status of the location . When calling the push function, the new location containing pathname , search , hash (analyzed from path ) and state will be pushed into the history stack of the react-router. In component redirected to, location of this component is the location just pushed on the stack that history.

As such, we can take advantage of this to assign the flash message to the state , when displaying the redirected component, retrieve the flash message data in the state of the location and display it.

(*) function history.push can also take an object parameter containing pathname , search and state as follows:

For example

To illustrate, we’ll make an example React application that has functions for creating and displaying notes lists. When creating a note successfully, the application will redirect to the notes list page and display a flash message to notify creating a note successfully on this list page.

Add + show list of notes

Create a new project with create-react-app , then move into this directory:

Add css of bootstrap to public/index.html file:

Add react-router-dom package:

Create src/NoteForm.jsx file containing form to create notes. The form includes a textarea used to enter note content and a submit button. When submitting the form, the addNote function passed from the props will be used to create notes, which will then redirect to / .

Create a src/Notes.jsx file containing the component which displays the list of notes taken from the props notes . The note contains the content and creation time.

Edit the src/App.js file. New App will be available

  • State notes contain notes created. notes will be passed into the Notes component.
  • The addNote function is used to add new notes to notes . This function will be passed to the NoteForm component.
  • The routes declare the corresponding links and components. / for the Notes component, /create_note for the NoteForm .
  • utility functions to create createdAt values ​​for notes when creating notes.

Add css to src/index.css file:

Run the application using the yarn start command. We can create notes, but there is no flash message when redirecting to the notes list page. We will add flash message in the following step.

Add flash message

Create src/FlashMessage.jsx file containing FlashMessage component:

In the src/Notes.jsx file, get flashMessage in the state of the location and display:

At NoteForm ‘s submitForm function, pass another state when redirecting to / :

Now, when the note has finished creating and redirected to / , the flash message with the content Create note successfully! will appear.

Fix the error when pressing the Back button on the browser

After creating notes and redirecting to / , switch to form to create notes, flash messages will disappear. But if you then click the Back button on the browser, the notes list page will reappear and the flash message will appear again.

The reason for this is that the react-router retrieves the old location from the stack and this location still contains flashMessage in its state . The Component Notes will run the code again to get flashMessage from the state of the location and show the flashMessage again.

In order for the flash message to not show up again like this, we will always delete the flashMessage in the state of the location when we retrieve it. Modify src/Notes.jsx as follows:

If you try the Back button above, the flash message will not appear again.

Move the flash message handling code into the hook

For ease of reuse, we can move the flash message handling code in the Notes component into the useFlashMessage hook. Other components can use this hook to get flashMessage from the location and display.

Create src/use_flash_message.jsx file with the following content:

The hook useFlashMessage will return the flashMessageComponent function, we can use this function as a component to display the flash message. Edit src/Notes.jsx :

Extend: we can return more flashMessage , setFlashMessage from useFlashMessage to use as an option, such as using setFlashMessage to display flashMessage with new content right on the current page.

Conclude

Through the theory and examples presented above, hopefully you are having problems displaying flash messages at page turning can refer to smooth problem solving. Thank you for following the article.

Share the news now

Source : Viblo