React-router-dom中Link跳转URL异常，无法解析todo.id变量

核心问题 #

你在Card组件中给Link的to属性赋值时，用了单引号包裹/${todo.id}，单引号无法解析模板字符串里的变量，导致${todo.id}被当作普通文本，URL编码后就变成了$%7Btodo.id%7D。模板字符串必须用**反引号（`）**包裹才能正确解析变量。

修复后的Card组件代码 #

import React from 'react';
import {Link} from "react-router-dom";

export const Card = ({listOfTodos}) => {
    return (
        <>
            {listOfTodos.map(todo => {
                return(
                    <ul key={todo.id}>
                        <li>
                            <Link to={`/${todo.id}`}>{todo.content}</Link>
                        </li>
                    </ul>
                )
            })}
        </>
    )
}

额外优化建议 #

1. App.js缺失组件导入：当前代码里没有导入TodoPage组件，需要补充导入语句，否则会报错：

   import { TodoPage } from './TodoPage'; // 根据实际文件路径调整
   

2. Flask后端接口优化：你的show接口返回的是数组，但单个todo应该返回对象更合理，修改后端代码：

   @app.route('/api/<int:id>')
   def show(id):
       todo = Todo.query.get(id)
       return jsonify(todo_serializer(todo) if todo else {})
   

   对应Show组件可以简化渲染逻辑：

   import React, {useState, useEffect} from 'react';
   import {useParams} from "react-router-dom";
   
   export const Show = () => {
       const {id} = useParams()
       const [todo, setTodo] = useState(null)
   
       useEffect( () => {
           fetch(`/api/${id}`)
           .then(response => response.json())
           .then(data => setTodo(data)) 
       }, [id] )
   
       return (
           <div>
               {todo && <div>{todo.content}</div>}  
           </div>
       )
   }
   

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