volver (<> Algunos jsx..
<Route path={modal.info ? `/fullInfo/${this.state.modal.id}`:`/preview/${this.state.modal.id}`} element={({match}) => { return ( <ModalWindow modalVisible={Boolean(match)} onCloseWindow={this.onCloseWindow} modalContent={modal} /> ) }} /> </> )Si hago eso, aparece un error como: La etiqueta de ruta debe estar envuelta por la etiqueta de rutas. Hice esta función en una versión anterior de react-router-dom, pero cuando intento hacerlo en la nueva hay un error.
En su archivo App.js, envuelva toda la aplicación con <BrowserRouter>
const AppWithRouter = () => <BrowserRouter><App /></BrowserRouter> export default AppWithRouter Y luego envuelva todas sus rutas en la nueva etiqueta <Routes> (reemplaza al interruptor):
<Routes> <Route path="..." element={...} /> </Routes>El componente de Routes reemplazó efectivamente al componente Switch de v5 y es necesario para envolver cualquier componente Route . Además, los componentes Route ya no toman las funciones de component , render y accesorios secundarios, children componentes enrutados deben usar el element prop que toma un ReactElement , también conocido como JSX.
Envuelva el componente Route en un componente Routes y, dado que todas las rutas siempre coinciden exactamente, simplemente represente ModalWindow con el accesorio modalVisible establecido en verdadero.
return ( <> ...Some jsx... <Routes> <Route path={modal.info ? `/fullInfo/${this.state.modal.id}` :`/preview/${this.state.modal.id}` } element={( <ModalWindow modalVisible onCloseWindow={this.onCloseWindow} modalContent={modal} /> )} /> </Routes> </> )