Entonces, estoy haciendo una tarea y aparece el siguiente error cuando ejecuto mi aplicación de reacción (debe ser una URL dinámica como /item/n):

 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it. at Routes (http://localhost:3000/static/js/bundle.js:35605:5) at Router (http://localhost:3000/static/js/bundle.js:35538:15) at BrowserRouter (http://localhost:3000/static/js/bundle.js:35014:5)

índice.js:

 import React from 'react' import ReactDOM from 'react-dom' import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import ProductMainView from './components/productMainView' const rootElement = document.getElementById('root') ReactDOM.render( <Router> <Routes> <Route exact path="/item/:item_id" element={(props) => <ProductMainView id={props.params.id} />} /> </Routes> </Router>, rootElement );

productMainView.jsx:

 import React, { Component } from 'react' class ProductMainView extends Component { componentDidMount() { console.log(this.props) let id = this.props.match.params.item_id } render() { return <h1>Placeholder</h1> } } export default ProductMainView

Sí, sé que el componente basado en clases está un poco obsoleto, pero estoy limitado por la tarea.

Nota: Si el método para obtener la identificación del componente es incorrecto, se agradecerán otras formas.

Nota v2: estoy usando react-router v6.2.2