如何在MERN栈笔记应用中实现隐藏笔记功能（基于Mongoose）

需求说明：

• 点击「隐藏笔记」按钮后，目标笔记从当前展示列表移除，同时加入隐藏笔记列表
• 提供「隐藏笔记」入口，点击后可查看所有已隐藏的笔记，且支持对单条笔记执行取消隐藏操作

相关资源：

• 网页截图：共4张，分别展示应用当前的不同页面状态
• 项目代码包：包含完整的MERN栈笔记应用代码
• 当前App.js代码：

import './App.css';
import {
BrowserRouter as Router,
Routes,
Route,
Link
} from "react-router-dom";
import Navbar from './components/Navbar';
import Home from './components/Home';
import AddNote from "./components/AddNote"
import About from './components/About';
import NoteState from './context/notes/NoteState';
import Alert from './components/Alert';
import Footer from './components/Footer';
import DropDown from './components/DropDown';

function App() {
 return (
    <>
      <NoteState>
        <Router>
          <Navbar />
          <DropDown></DropDown>
          <div className="container">
           <Routes>
              <Route exact path="/" element={<Home />} />
              <Route exact path="/about" element={<About />} />
              <Route exact path="/addnote" element={<AddNote/>} />
            </Routes>
          </div>
          <Alert message="This is amazing React course" />
          <Footer></Footer>
        </Router>
      </NoteState>
    </>
  );
}
export default App;

内容的提问来源于stack exchange，提问作者Garvit pareek