如何将元素从 defaultProps 数组传递到 React Router v6 中的组件答案

【问题标题】：How to pass an element from a defaultProps array to a component in React Router v6如何将元素从 defaultProps 数组传递到 React Router v6 中的组件
【发布时间】：2022-11-19 19:22:03
【问题描述】：

在我的 App.jsx 中，我希望能够将一只狗作为道具传递给 DogDetails 组件。

我目前的工作..但是 DogDetails 组件显然包含整个狗数组作为道具，只包含 :id 在路径中的狗会更有意义。

我正在学习的教程使用的是旧版本的 React 路由器，他们设法做到这一点的方式是在他们的 App.js render() 中：

render() {

  const getDog = props => {
    let name = props.match.params.name;
    let currentDog = this.props.dogs.find(
      dog => dog.name.toLowerCase() === name.toLowerCase()
    );
    return <DogDetails {...props} dog={currentDog} />;
  };
  return (
    ...
    <Route path='/dogs/:name' render={getDog} />
)

在 react router v6 中，我不能在 Route 组件内部使用 render。我写的三个组件如下。

干杯!

应用程序.jsx

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import DogDetails from './DogDetails';
import DogList from './DogList';

export default function App({ dogs }) {
  return (
    <div className="App">

      <Routes>
        <Route path="/dogs" element={<DogList dogs={dogs} />} />

        {/* I want to be able to pass through the individual dog */}
        <Route path="/dogs/:id" element={<DogDetails dog={dogs} />} />

      </Routes>
    </div>
  );
}

App.defaultProps = {
  dogs: [
    {
      name: 'Blue',
      age: '2 months',
      src: './blue.jpeg',
    },
    {
      name: 'Billie',
      age: 3,
      src: './bordie.jpeg',      
    },
    {
      name: 'Eevee',
      age: 4,
      src: './lab.jpeg',      
    },
  ],
};

DogList.jsx

import React from 'react';
import { NavLink } from 'react-router-dom';

import './css/DogList.css';

export default function DogList(props) {
  return (
    <div className="DogList">
      <h1 className="display-1 text-center">Dog List!</h1>
      <div className="container">
        <div className="row">
          {props.dogs.map((d) => (
            <div className="Dog col-md-6 col-lg-4 text-center" key={d.name}>
              <NavLink to={`/dogs/${d.name}`}>
                <img src={d.src} alt={d.name} />
                <h3>{d.name}</h3>
              </NavLink>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

DogDetails.jsx

import React from 'react';
import { useParams } from 'react-router-dom';

export default function DogDetails(props) {
  const { id } = useParams();
  // i want to be able to just use `props.dog.name` instead of:
  const dog = props.dog.filter((dog) => dog.name.toLowerCase() === id.toLowerCase());
  return (
    <div>
      <h1>{`${dog[0].name}'s Details`}</h1>
    </div>
  );
}

【问题讨论】：

标签： javascript reactjs react-router react-functional-component

【解决方案1】：

您不能在路由器级别进行过滤，因为一旦您转到 URL，id 就会传递给组件。

你可以做的是使用 useMemo 来过滤 dog 这样它只会在 router-id 改变时触发

还使用find 代替过滤器

const dog = useMemo(() => {
    return props.dog.find((dog) => dog.name.toLowerCase() === id.toLowerCase());
   }, [id, props.dog])

【讨论】：