Si el accesorio de match no está definido, esto podría deberse a algunas cosas.

react-router-dom v5

Si usa RRDv5 si el accesorio de match no está definido, esto significa que BookScreen no está recibiendo los accesorios de ruta que se inyectan cuando un componente se procesa en el accesorio de component del componente de Route , o las funciones de render o accesorios children . Tenga en cuenta que al usar children , la ruta coincidirá y se representará independientemente; consulte los métodos de representación de rutas para obtener más detalles.

Asegúrese de que se implemente uno de los siguientes para acceder al objeto de match :

1. Renderizar BookScreen en el accesorio de component de una Route

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

2. Renderizar BookScreen en la función render o children prop de una Route y pasar los accesorios de ruta a través de

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

   o

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

3. Decore BookScreen con el componente de orden superior withRouter para inyectar los accesorios de ruta

    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. Dado que BookScreen es un componente de la función React, importe y use el useParams para acceder a los parámetros de coincidencia de ruta

    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

Si usa RRDv6, entonces no hay ningún accesorio de match . Atrás quedaron los accesorios de ruta. Aquí solo useParams y otros ganchos, así que utilícelos.

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

Si tiene otros componentes de clase y está utilizando RRDv6 y no desea convertirlos en componentes de función, deberá crear un componente personalizado de withRouter . Vea mi respuesta aquí con detalles.

Supongo que renderizó el componente BookScreen antes de que se inicialice la coincidencia. Esta es la razón por la que la coincidencia no está definida cuando se representa BookScreen. Renderizarlo condicionalmente como a continuación.

 return ( ... other components {match && <BookScreen match={match}/>} )

Además, dejo un sitio útil que le indica algunas buenas formas de hacerlo. :D

https://www.digitalocean.com/community/tutorials/7-ways-to-implement-conditional-rendering-in-react-applications

Espero que encuentres una respuesta :D