• • 此问题在此处已有答案**：

How to pass data from a page to another page using react router（5个答案）
昨天关门了。
App.jsx

import './App.css'
import React, {useState} from 'react';
import { Link, Routes, Route } from 'react-router-dom';
import Calendar from "./components/calendar/calendar.jsx";
import ToDo from "./components/todolist/todolist.jsx";
import { useParams } from 'react-router-dom';

const App = () => {

    return (
        <div>
            <Routes>
                <Route path='/' element={<Calendar  />} />
                <Route path='/todo/:id' element={<ToDo />} />
            </Routes>
        </div>
    )
}

export default App;

calendar.jsx

import './calendar.css'
import {Link} from 'react-router-dom'
import React from "react";

const Calendar = () => {

    return (
        <div className="month">
            <h1> February 2023 </h1>
            <div className="names">
                <div className="weekNames">Monday</div>
                <div className="weekNames">Tuesday</div>
                <div className="weekNames">Wednesday</div>
                <div className="weekNames">Thursday</div>
                <div className="weekNames">Friday</div>
                <div className="weekNames">Saturday</div>
                <div className="weekNames">Sunday</div>
            </div>
            <div className="week">
                <div className="day">1 <Link to='/todo/1'> To-Do:  </Link> </div>
                <div className="day">2 <Link to='/todo/2'> To-Do:  </Link> </div>
                <div className="day">3 <Link to='/todo/3'> To-Do: </Link> </div>
                <div className="day">4 <Link to='/todo/4'> To-Do: </Link> </div>
                <div className="day">5 <Link to='/todo/5'> To-Do: </Link> </div>
                <div className="day">6 <Link to='/todo/6'> To-Do: </Link> </div>
                <div className="day">7 <Link to='/todo/7'> To-Do: </Link> </div>
                <div className="day">8 <Link to='/todo/8'> To-Do: </Link></div>
                <div className="day">9 <Link to='/todo/9'> To-Do: </Link> </div>
                <div className="day">10 <Link to='/todo/10'> To-Do: </Link> </div>
                <div className="day">11 <Link to='/todo/11'> To-Do: </Link> </div>
                <div className="day">12 <Link to='/todo/12'> To-Do: </Link> </div>
                <div className="day">13 <Link to='/todo/13'> To-Do: </Link> </div>
                <div className="day">14 <Link to='/todo/14'> To-Do: </Link> </div>
                <div className="day">15 <Link to='/todo/15'> To-Do: </Link> </div>
                <div className="day">16 <Link to='/todo/16'> To-Do: </Link> </div>
                <div className="day">17 <Link to='/todo/17'> To-Do: </Link> </div>
                <div className="day">18 <Link to='/todo/18'> To-Do: </Link> </div>
                <div className="day">19 <Link to='/todo/19'> To-Do: </Link> </div>
                <div className="day">20 <Link to='/todo/20'> To-Do: </Link> </div>
                <div className="day">21 <Link to='/todo/21'> To-Do: </Link> </div>
                <div className="day">22 <Link to='/todo/22'> To-Do: </Link> </div>
                <div className="day">23 <Link to='/todo/23'> To-Do: </Link> </div>
                <div className="day">24 <Link to='/todo/24'> To-Do: </Link> </div>
                <div className="day">25 <Link to='/todo/25'> To-Do: </Link> </div>
                <div className="day">26 <Link to='/todo/26'> To-Do: </Link> </div>
                <div className="day">27 <Link to='/todo/27'> To-Do: </Link> </div>
                <div className="day">28 <Link to='/todo/28'> To-Do: </Link> </div>
            </div>
        </div>
    );
}

export default Calendar

todolist.jsx

import './todolist.css'
import React from "react";
import { NavLink } from "react-router-dom";
import { useParams } from 'react-router-dom';

const ToDo = () => {
  const {id} = useParams()
  const [todos, setTodos] = React.useState(() => JSON.parse(localStorage.getItem(`todos-${id}`)) || []);
  const [todo, setTodo] = React.useState("");
  const [todoEditing, setTodoEditing] = React.useState(null);
  const [editingText, setEditingText] = React.useState("");

  React.useEffect(() => {
    const json = JSON.stringify(todos);
    localStorage.setItem(`todos-${id}`, json);
  }, [todos, id]);

  function handleSubmit(e) {
    e.preventDefault();
    const newTodo = {
      id: new Date().getTime(),
      text: todo,
      completed: false,
    };
    setTodos([...todos].concat(newTodo));
    setTodo("");
  }

  function deleteTodo(id) {
    let updatedTodos = [...todos].filter((todo) => todo.id !== id);
    setTodos(updatedTodos);
  }

  function toggleComplete(id) {
    let updatedTodos = [...todos].map((todo) => {
      if (todo.id === id) {
        todo.completed = !todo.completed;
      }
      return todo;
    });
    setTodos(updatedTodos);
  }

  function submitEdits(id) {
    const updatedTodos = [...todos].map((todo) => {
      if (todo.id === id) {
        todo.text = editingText;
      }
      return todo;
    });
    setTodos(updatedTodos);
    setTodoEditing(null);
  }

  return (
    <div>
      <div align='right'>
        <NavLink to='/' style={{textDecoration: 'none', color: 'black'}}><button className='btn'> Calendar View </button></NavLink>
      </div>
      <div id="todo-list">
        <h1>To-Do For Today</h1>
        <h2> Total Tasks: {todos.length} </h2>
        <form onSubmit={handleSubmit}>
          <input
            type="text"
            onChange={(e) => setTodo(e.target.value)}
            value={todo}
          />
          <button className="btn">Add To-Do</button>
        </form>
        {todos.map((todo) => (
          <div key={todo.id} className="todo">
            <div className="todo-text">
              <input
                type="checkbox"
                id="completed"
                checked={todo.completed}
                onChange={() => toggleComplete(todo.id)}
              />
              {todo.id === todoEditing ? (
                <input
                  type="text"
                  onChange={(e) => setEditingText(e.target.value)}
                />
              ) : (
                <div>{todo.text}</div>
              )}
            </div>
            <div className="todo-actions">
              {todo.id === todoEditing ? (
                <button className='btnXS' onClick={() => submitEdits(todo.id)}>Submit</button>
              ) : (
                <button className='btnXS' onClick={() => setTodoEditing(todo.id)}>Edit</button>
              )}

              <button className='btnXS' onClick={() => deleteTodo(todo.id)}>Delete</button>

            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ToDo;

我正在尝试建立一个日历网页应用程序，每天都有待办事项列表。因此，当用户在任何一天点击链接时，都应该能够添加和编辑当天要做的事情。但我也希望在日历页面中显示每天添加的待办事项总数。例如，1个待办事项："显示这一天的待办事项总数"
我尝试在日历页面上调用{todos. length}，但它总是显示0。