Map is not a function quando clico no botão de voltar em uma página redirecionada no React

Desenvolvimento Web
#1

Eu tenho uma página chamada MyNotes que mostra todas as notas de um usuário específico. Quando um botão é pressionado para visualização de detalhes o usuário é redirecionado para outra página (NoteDetail) onde estou passando o id específico dessa nota. Na página de redirecionamento com ajuda do id eu chamo uma api e preencho os dados. Mas agora, se o usuário clica no botão Voltar para a página anterior (MyNotes.js), recebo o erro abaixo:

MyNotes.js:30 Uncaught TypeError: notes.map is not a function
    at MyNotes (MyNotes.js:30:1)
    at renderWithHooks (react-dom.development.js:14985:1)

Os códigos das páginas que eu mencionei:

MyNotes

import React, { useEffect, useContext } from "react";
import { useNavigate } from "react-router-dom";
import Noteitem from "../components/NoteItem";
import AuthContext from "../context/AuthContext";
import noteContext from "../context/NotesContext";

const MyNotes = () => {
  const context = useContext(noteContext);
  const { user, authtoken } = useContext(AuthContext);
  const { notes, getNotes } = context;
  const navigate = useNavigate();

  useEffect(() => {
    if (user) {
      getNotes();
    } else {
      navigate("/login");
    }
    // eslint-disable-next-line
  }, []);

  return (
    <>
      <div className="container my-4">
        <h1>Hello {user.name}</h1>
      </div>

      <div className="row my-2">
        <h1>Your Notes</h1>
        <div className="container">
          {notes.length === 0 && "No Notes to display"}
        </div>
        {notes.map((notes) => {
          return <Noteitem key={notes.id} note={notes} />;
        })}
      </div>
    </>
  );
};

export default MyNotes;

NoteItem Esta é a página que contém a função para redirecionar

import React, { useContext, useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import noteContext from "../context/NotesContext";
import NoteDetail from "../pages/NoteDetail";

const NoteItem = (props) => {
  const { note } = props;
  const { deleteNote } = useContext(noteContext);
  const navigate = useNavigate();

  const toDetailPage = () => {
    navigate(`/notedetail/${note.id}`, { state: { id: note.id } });
  };

  return (
    <div className="col-md-3">
      <div className="card">
        <div className="card-body">
          <div className="d-flex align-items-center">
            <h5 className="card-title">{note.title}</h5>
            <i
              className="fas fa-trash-alt mx-2 delete"
              onClick={() => {
                deleteNote(note.id);
              }}
            ></i>
            <i className="far fa-edit mx-2 edit"></i>
          </div>
          <p className="card-text"> Tags: {note.tags}</p>
          <button
            onClick={() => {
              toDetailPage();
            }}
            className="btn btn-primary"
          >
            Read Note
          </button>
        </div>
      </div>
    </div>
  );
};

export default NoteItem;

NoteDetail

import React, { useContext, useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import noteContext from "../context/NotesContext";

const NoteDetail = () => {
  const { notes, noteDetail } = useContext(noteContext);

  const location = useLocation();

  const { id } = location.state;

  useEffect(() => {
    noteDetail(id);
    console.log("This is note recieved in NoteDetail.js", notes);
  }, [id]);

  return (
    <div className="container">
      <p>{notes.id}</p>
      <p> {notes.title} </p>
      <p> {notes.description} </p>
      <p> {notes.tags} </p>
    </div>
  );
};

export default NoteDetail;

Como eu consigo resolver esse erro?

#2

Para conseguir voltar em uma página redirecionada no React você primeiro precisa checar se as notas não são undefined.

{notes && notes.length? notes.map((notes) => {
          return <Noteitem key={notes.id} note={notes} />;
        }) : <p>Nenhuma nota encontrada!</p>}

notese notes.length checam se as notas existem e se existe algo dentro do array delas. Já o operador ternário ou retorna uma função map das notas ou retorna uma mensagem dizendo que nenhuma nota foi encontrada.