javascript - 未捕获的类型错误 : match is undefined

Question

import books from '../books'


function BookScreen({ match }) {
    const book = books.find((b) => b._id === match.params.id)
    return (
        <div>
            {book}
        </div>
    )
}

export default BookScreen

我不断收到错误匹配未定义。我看到了一个包含类似代码的教程，但在测试时似乎还不错。任何线索可能是什么问题？

Answer 1

如果 match 属性未定义，这可能是由一些原因造成的。

react-router-dom v5

如果在 match 属性未定义的情况下使用 RRDv5，这意味着 BookScreen 没有收到 route props当组件在 Route 组件的 component Prop 或 render 或 children Prop 函数上渲染时注入(inject).请注意，使用 children 路由将匹配并渲染，见 route render methods了解详情。

确保执行以下操作之一以访问 match 对象:

1. 在 Route

   的 component 属性上渲染 BookScreen

   <Route path="...." component={BookScreen} />
   

2. 在 Route 的 render 或 children 属性函数上渲染 BookScreen 并传递路由 Prop 通过

   <Route path="...." render={props => <BookScreen {...props} />} />
   

   或

   <Route path="...." children={props => <BookScreen {...props} />} />
   

3. 用 withRouter 装饰 BookScreen注入(inject)路由 Prop 的高阶组件

   import { withRouter } from 'react-router-dom';
   
   function BookScreen = ({ match }) {
     const book = books.find((b) => b._id === match.params.id)
     return (
       <div>
         {book}
       </div>
     );
   };
   
   export default withRouter(BookScreen);
   

4. 由于 BookScreen 是一个 React 函数组件，所以导入并使用 useParams钩子(Hook)访问路由匹配参数

   import { useParams } from 'react-router-dom';
   
   ...
   
   function BookScreen() {
     const { id } = useParams();
     const book = books.find((b) => b._id === id)
     return (
       <div>
         {book}
       </div>
     );
   }
   

react-router-dom v6

如果使用 RRDv6，则没有 match 属性。路线 Prop 不见了。这里只有 useParams和其他钩子(Hook)存在，所以使用它们。

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

...

function BookScreen() {
  const { id } = useParams();
  const book = books.find((b) => b._id === id)
  return (
    <div>
      {book}
    </div>
  );
}

如果您有其他类组件并且您正在使用 RRDv6 并且您不想将它们转换为函数组件，那么您需要创建一个自定义 withRouter 组件。看我的回答here有细节。