使用react-router，我尝试传递一个返回元素的函数到<Route />元素选项，但我不断收到错误

Question

我正在构建一个小型

react-router

实践项目，我试图通过传递一个返回动态

<Route exact path="/dogs/:name" element={in here}/>

组件的函数，将一些有关狗的虚构信息传递给

<DogDetail {...props} dog={currentDog}/>

，该组件将相关信息作为 props 传入。然而，每次我尝试这样做时，我都会收到两个错误之一：

1. 位置“/dogs/hazel”处的匹配叶路由没有元素。这意味着默认情况下它将呈现一个具有空值的

   <Outlet />

   ，从而导致“空”页面。
2. 警告：函数作为 React 子项无效。如果您从渲染中返回 Component 而不是

   <Component />

   ，则可能会发生这种情况。或者也许您打算调用此函数而不是返回它。

这是我的代码：

class App extends Component {
  static defaultProps = {
    dogs: [
      {
        name: "Daisy",
        age: 2,
        src: daisy,
        facts: [
          "Daisy is our newest love.",
          "Daisy is a terrible guard dog.",
          "Daisy wants to cuddle with you!",
          "Daisy just wanted a home and now she has that plus love",
        ],
      },
      {
        name: "Hazel",
        age: 6,
        src: hazel,

        facts: [
          "Hazel had soooo much energy!",
          "Hazel wanted love and her big sis, Maci.",
          "Hazel loved us more than anything but she would have still gone home with a stranger any day",
          "Hazel loved eating food slightly more than Maci did",
        ],
      },
      {
        name: "Tubby",
        age: 7,
        src: tubby,
        facts: [
          "Tubby was the smartest dog",
          "Tubby did not like walks or exercise.",
          "Tubby preferred to watch over the situations",
          "Tubby loved eating food.",
        ],
      },
    ],
  };

  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 (
      <div className="App">
        <Navbar />
        <Routes>
          <Route exact path="/dogs" element={<DogList dogs={this.props.dogs} />}></Route>
          <Route exact path="/dogs/:name" element={getDog}></Route>
          <Route path="*" element={<h1>Not Found</h1>}></Route>
        </Routes>
      </div>
    );
  }
}

export default App;

现在，

<DogDetail />

组件仅渲染

this.props.dog.name

，但在导航到任何狗的名字时我什么也看不到。

我尝试过将其作为内联函数、作为绑定在构造函数中的函数以及作为具有设置为

<DogDetail />

函数的 prop 的

getDog

组件传递，但似乎没有任何效果。我对

react-router

很陌生，但我似乎找不到有关这个特定问题的任何信息。我刚刚关注了一个代码项目视频，但显然它已经过时了。它一直在教授旧版本的

react-router

，我一直在尝试按照 v6 文档来更新它，但这就是我陷入困境的地方。

Answer 1

在

react-router-dom@6

中，

Route

组件的

element

属性仅采用

React.ReactNode

，又名 JSX。将

getDog

函数抽象为实际的 React 组件。

Route

组件也不再有路线道具，它们不存在。要访问路由参数，您需要使用

useParams

钩子。

示例：

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

const DogDetailsWrapper = ({ dogs = [] }) => {
  const { name } = useParams();

  const currentDog = dogs.find(
    dog => dog.name.toLowerCase() === name.toLowerCase()
  );

  return <DogDetails dogs={dogs} dog={currentDog} />;
}

import { Routes, Route } from 'react-router-dom';

class App extends Component {
  ...
    
  render() {
    const { dogs } = this.props;

    return (
      <div className="App">
        <Navbar />
        <Routes>
          <Route path="/dogs" element={<DogList dogs={dogs} />} />
          <Route
            path="/dogs/:name"
            element={<DogDetailsWrapper dogs={dogs} />}
          />
          <Route path="*" element={<h1>Not Found</h1>} />
        </Routes>
      </div>
    );  
  }
}
    
export default App;

Answer 2

使用@Drew Reese 的答案并在传递道具（this.props.dogs）时进行一些更改对我有用。 ...

render() {

const GetDog= (props) => {
  const { name } = useParams();

  const currentDog = this.props.dogs.find(
    dog => dog.name.toLowerCase() === name.toLowerCase()
  );

  return <DogDetails {...props} dog={currentDog} />;
}

return (
    <Routes>
    <Route exact path='/dogs' element={<DogList dogs={this.props.dogs} />} />
    <Route
        path="/dogs/:name"
        element={<GetDog />}
      />
    <Route
    path="*"
    element={<Navigate to="/" replace />} 
/>

  </Routes>
)

}