React Router 根据 URL 渲染信息

Question

所以我想学习 React，我正在做一个项目，我想渲染关于汽车的文章。我有我的 CarContext

export const CarProvider = (props) => {
  const [cars, setCars] = useState([
    {
      name: 'Car1',
      img: car1,
      id: 1,
      info:
        'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum qui unde voluptate numquam aspernatur dolor sunt ducimus dolore nesciunt. Voluptate suscipit omnis velit maxime explicabo dicta at quo modi placeat',
    },
    {
      name: 'car2',
      img: car2,
      id: 2,
      info:
        'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum qui unde voluptate numquam aspernatur dolor sunt ducimus dolore nesciunt. Voluptate suscipit omnis velit maxime explicabo dicta at quo modi placeat',
    },
    {
      name: 'car3',
      img: car3,
      id: 3,
      info:
        'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum qui unde voluptate numquam aspernatur dolor sunt ducimus dolore nesciunt. Voluptate suscipit omnis velit maxime explicabo dicta at quo modi placeat',
    },
  ]);
  return (
    <CarContext.Provider value={[cars, setCars]}>
      {props.children}
    </CarContext.Provider>
  );
};

App.js

function App() {
  return (
    <CarProvider>
      <Router>
        <div className='App'>
          <Header />
        </div>
        <Switch>
          <Route path='/articles' exact component={Articles} />
          <Route path='/articles/:id' component={SpecificArticle} />
          <Route path='/' exact component={Home} />
        </Switch>
        <Footer />
      </Router>
    </CarProvider>
  );
}

我创建了一个名为 CarArticles 的组件，用于渲染所有文章（名称和图片）和一个按钮。

import { CarContext } from '../CarContext';

const CarArticles = () => {
  const [cars, setCars] = useContext(CarContext);
  return (
    <div>
      {cars.map((car) => (
        <Card
          name={car.name}
          img={car.img}
          key={car.id}
          id={car.id}
        />
      ))}
    </div>
  );
};

export default CarArticles;

const Card = ({ name, img, id }) => {
  return (
    <div>
      <h3>{name}</h3>
      <img src={img} alt='img of car'/>
      <Link to={`/articles/${id}`}>
        <button>read more</button>
      </Link>
    </div>
  );
};

export default Card;

当我单击其中一个按钮时，将显示带有静态文本“这是特定汽车文章页面，具体取决于您单击的按钮”的组件 SpecificArticle

const SpecificArticle = () => {

  return (
    <div>
      <h3>
        <h2>
          "Here's the specific Car article page depending on which button you
          clicked"
        </h2>
      </h3>
    </div>
  );
};

export default SpecificArticle;

我的问题是如何在“SpecificArticle”中获取具体的汽车信息？如果我单击第 1 条，我希望组件呈现来自 object1 的信息...如果我单击第 2 条，我希望来自 object2 的信息，例如命名 img 和信息...

Answer 1

使用 useParams() 访问 URL 参数：

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

const SpecificArticle = () => { 
  const params  = useParams();
  const id = params.id;
  
  return (
    <div>This is the id : {id}</div>
  )
 }
  

既然要使用Context Provider，就应该定义为

export const cars = {
    'Car1': {
      name: 'Car1',
      img: car1,
      id: 1,
      info:
        'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum qui unde voluptate numquam aspernatur dolor sunt ducimus dolore nesciunt. Voluptate suscipit omnis velit maxime explicabo dicta at quo modi placeat',
    },
    'car2': {
      name: 'car2',
      img: car2,
      id: 2,
      info:
        'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum qui unde voluptate numquam aspernatur dolor sunt ducimus dolore nesciunt. Voluptate suscipit omnis velit maxime explicabo dicta at quo modi placeat',
    },
    'car3': {
      name: 'car3',
      img: car3,
      id: 3,
      info:
        'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum qui unde voluptate numquam aspernatur dolor sunt ducimus dolore nesciunt. Voluptate suscipit omnis velit maxime explicabo dicta at quo modi placeat',
    },
};

export const CarsProvider = React.createContext(
  cars.Car1 // default value
);

如果只使用几辆汽车，这种用法应该没问题，但随着项目的发展，加载 json 文件或数据库可能会更好。

Answer 2

使用参数

考虑使用react router useParams。

例子：

const SpecificArticle = () => {
  const { id } = useParams();

  return (
    <div>
      ...
    </div>
  );
};

---

汽车上下文

// create CarContext using an initial object with 'cars' being an empty array
const CarContext = createContext({cars: []})

// put cars data into the context provider
const cars = []; // array of data
<CarContext.Provider value={cars} />

// access the cars using the context anywhere inside the CarContext tree
const { cars } = useContext(CarContext);

这其实很简单，请学习如何使用react context，它“提供了一种通过组件树传递数据的方法，而无需在每一层都手动向下传递道具”。