我想创建一个Notebook应用程序，其中有一个笔记本列表，如“数学”和“科学”。当我选择其中一个笔记本时，我希望显示所选笔记本中的笔记列表。然后，当我单击某个特定的笔记时，我希望打开该笔记并在一个单独的组件中显示其内容，在该组件中我可以继续记笔记或编辑现有的笔记。
我已经为这个项目创建了单独的NotebookList、Notebook和Note组件。
我目前正在使用React Router，在配置组件和路由结构以实现此功能时遇到了问题。
以下是我目前掌握的信息：
NotebookList.js

import { Link } from 'react-router-dom';
const NotebookList = () => {
  return (
    <div>
      <h1>Notebooks</h1>
      <ul>
        <li><Link to="/notebook/mathematics">Mathematics</Link></li>
        <li><Link to="/notebook/science">Science</Link></li>
        {/* Add more notebook options here */}
      </ul>
    </div>
  );
};
export default NotebookList;

Notebook.js

import { useParams } from 'react-router-dom';
const Notebook = () => {
  const { notebookId } = useParams();
  // Fetch the notes for the selected notebook using notebookId
  return (
    <div>
      <h1>Notebook: {notebookId}</h1>
      {/* Display the list of notes */}
    </div>
  );
};
export default Notebook;

Note.js

import { useParams } from 'react-router-dom';
const Note = () => {
  const { notebookId, noteId } = useParams();
  // Fetch the content of the selected note using notebookId and noteId
  return (
    <div>
      <h1>Note: {noteId}</h1>
      {/* Display the content of the note */}
    </div>
  );
};
export default Note;

App.js

import { BrowserRouter as Router, Route } from 'react-router-dom';
import NotebookList from './NotebookList';
import Notebook from './Notebook';
import Note from './Note';
const App = () => {
  return (
    <Router>
      <Route exact path="/" component={NotebookList} />
      <Route path="/notebook/:notebookId" component={Notebook} />
      <Route path="/notebook/:notebookId/note/:noteId" component={Note} />
    </Router>
  );
};
export default App;

我将感谢任何关于如何正确配置组件和路由结构以实现所需功能的指导。