如何使用params.(key)来获取每个路由的特定数据？

Question

我想要建立一个汽车列表应用程序，它将显示一个汽车列表，当我点击汽车的详细信息按钮时，它会将其路由到另一个组件/页面，该组件/页面将显示汽车的详细信息。我可以拿到钥匙(vin )，但是我想知道这页上每把钥匙(Vin)的详细信息，就像http://localhost:3000/cars/WAUZZZ4G6FN052847=键。所以当一辆车的钥匙出现时，所有的细节都会因为他们的钥匙号码而来。谢谢。

index.html

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { BrowserRouter, Routes, Route, Outlet, } from "react-router-dom";
import DummyComponent from "./components/DummyComponent";
import CarDetails from "./pages/CarDetails";
import { Home } from "@mui/icons-material";
import Cars from "./pages/Cars";



const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(


  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="/cars" element={<Outlet />} >
        <Route path="list" element={<Cars />} />
        <Route path=":vin" element={<CarDetails />} />
      </Route>
      <Route path="Home" element={<Home />} />
      <Route path="DummyComponent" element={<DummyComponent />} />

    </Routes>
  </BrowserRouter>

);

Cars.js

import axios from "axios";
import React, { useEffect, useState } from "react";
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';
import { Link } from "react-router-dom";



const App = () => {


    const [cars, setCars] = useState([])
    const getCarData = async () => {
        try {
            const data = await axios.get("https://react-challenge-api.azurewebsites.net/vehicles")
            setCars(data.data)
        }
        catch (e) {
            console.log(e)
        }
    }

    useEffect(() => {
        getCarData()
    }, [])
    return (

        <div className="App">

            <List sx={{ width: '100%', maxWidth: 600, bgcolor: 'background.paper' }}>
                {cars.map((car) => (

                    <ListItemButton key={car.vin}>
                        <ListItem
                            key={car.vin}
                            disableGutters

                            secondaryAction={
                                <ListItemButton >
                                    <Link to={`/cars/${car.vin}`}>details</Link>

                                </ListItemButton>
                            }
                        >
                            <ListItemText key={car.vin} primary={car.model_variant} />

                        </ListItem>
                    </ListItemButton>

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

export default App;

CarDetails.js (我想在这个组件中显示每个数据，我使用了params，但是由于params，我不知道如何获得数据。)

import { useParams } from "react-router-dom";

const CarDetails = () => {

    let params = useParams();

    return (
        <>
            <h1>car</h1>
            <ul>
                this is your {params.vin}
            </ul>
        </>
    )
}



export default CarDetails;

Answer 1

我建议将获取的car数据移动到布局路由中，并在cars上下文中向下传递Outlet状态。

示例：

Cars -处理获取car数据并通过Outlet组件的上下文将Outlet状态传递到嵌套路由。

const Cars = () => {
  const [cars, setCars] = useState([]);

  const getCarData = async () => {
    try {
      const data = await axios.get(
        "https://react-challenge-api.azurewebsites.net/vehicles"
      );
      setCars(data.data);
    } catch (e) {
      console.log(e);
    }
  };

  useEffect(() => {
    getCarData();
  }, []);

  return <Outlet context={{ cars }} />;
};

CarList -从cars上下文中读取cars状态并呈现列表。

const CarList = () => {
  const { cars } = useOutletContext();

  return (
    <List sx={{ width: "100%", maxWidth: 600, bgcolor: "background.paper" }}>
      {cars.map((car) => (
        <ListItemButton key={car.vin}>
          <ListItem
            key={car.vin}
            disableGutters
            secondaryAction={
              <ListItemButton>
                <Link to={`/cars/${car.vin}`}>details</Link>
              </ListItemButton>
            }
          >
            <ListItemText key={car.vin} primary={car.model_variant} />
          </ListItem>
        </ListItemButton>
      ))}
    </List>
  );
};

CarDetails -从出口上下文获取vin路由路径param和cars数组，并搜索匹配的car对象。

const CarDetails = () => {
  const { vin } = useParams();
  const { cars } = useOutletContext();

  const car = cars.find((car) => car.vin === vin);

  if (!car) {
    return "No car matches this VIN";
  }

  return (
    <>
      <h1>{car.model_variant}</h1>
      <ul>
        <li>Body: {car.body_type}</li>
        <li>Doors: {car.doors}</li>
        <li>Fuel: {car.fuel_type}</li>
        <li>VIN: {car.vin}</li>
        <li>Registration #: {car.regno}</li>
        <li>Transmission: {car.transmission_type}</li>
      </ul>
    </>
  );
};

路线

<Routes>
  <Route path="/" element={<App />} />
  <Route path="/cars" element={<Cars />}> // <-- layout route renders outlet
    <Route path="list" element={<CarList />} />
    <Route path=":vin" element={<CarDetails />} />
  </Route>
  <Route path="Home" element={<Home />} />
  <Route path="DummyComponent" element={<DummyComponent />} />
</Routes>

​

​