20、前端与后端开发：构建汽车销售应用

前端与后端开发：构建汽车销售应用

1. 前端单辆车页面的创建

1.1 编辑 SingleCar.jsx 文件

为了展示单辆车的信息，我们需要编辑 SingleCar.jsx 文件，并引入 useLoaderData 钩子，该钩子此前已用于车辆页面的数据预加载。以下是具体代码：

import { useLoaderData } from “react-router-dom”;
import CarCard from “../components/CarCards”;

const SingleCar = () => {
    const car = useLoaderData()
    return (
        <CarCard car={car} />
    );
};

export default SingleCar

这里我们复用了 CarCard 函数来显示车辆数据。在实际场景中，这个页面可能会包含图片库、更多数据、评论或笔记等。

1.2 更新 App.jsx 文件中的路由

打开 App.jsx 文件，更新 cars/:id 路由。其中，冒号表示参数，这里的参数是 MongoDB 集合中汽车的 ObjectId 的字符串版本。以下是更新后的代码：