Tengo este código de reacción.
const MenuItem = ({title, imageUrl, linkUrl}) => { const [isClicked, setIsClicked] = useState(false); const handleClick = () =>{ setIsClicked(true); } const handleLocation = () => { if(window.location.pathname === '/movie'){ <MoviePage categoryId={linkUrl}/> } } return ( <div className="menu-item"> <div className="image-container" style={{backgroundImage:`url(${imageUrl})`}}/> <div className="image-content" onClick={handleClick}> {isClicked ? {handleLocation}: null} <h1>{title}</h1> </div> </div> ); }Aquí, en el evento onclick, quiero mostrar el componente en otra página, así que usé window.location, pero obtuve este error
Error no detectado: los objetos no son válidos como hijos de React (encontrado: objeto con claves {handleLocation}). Si tenía la intención de representar una colección de niños, use una matriz en su lugar.
No es así como navegaría en una aplicación React: necesita una solución de enrutamiento, por ejemplo, https://reactrouter.com/
Con react-router puedes definir y configurar tus rutas y navegar hacia ellas sin recargar la página.
Trate de trabajar con el tutorial: https://reactrouter.com/docs/en/v6/getting-started/tutorial
Básicamente, tendría un enrutador con rutas como esta:
<BrowserRouter> <Routes> <Route path="/" element={<App />} /> <Route path="expenses" element={<Expenses />} /> <Route path="invoices" element={<Invoices />} /> </Routes> </BrowserRouter>Del documento oficial ,
Puede poner cualquier expresión de JavaScript válida dentro de las llaves en JSX.
JSX también es una expresión Después de la compilación, las expresiones JSX se convierten en llamadas de función de JavaScript regulares y se evalúan como objetos de JavaScript.
<div className="image-content" onClick={handleClick} > {isClicked ? {handleLocation} : null} // should be {isClicked ? handleLocation() : null} <h1>{title}</h1> </div> En su código, handleLocation con llaves será la expresión Javascript de la gramática JSX. Entonces {handleLocation} será una referencia de su función handleLocation . Nunca se llama . Debería llamarlo como handleLocation() .
const handleLocation = () => { if (window.location.pathname === '/movie') { <MoviePage categoryId={linkUrl}/> // it is just a expression, not returns any value } } Un cambio más que necesita en su código es devolver el elemento JSX en handleLocation . <MoviePage /> en la instrucción if es solo una expresión. Entonces esta función nunca devolverá ningún valor. Debe agregar return delante de <MoviePage /> , luego ReactDOM renderizará este componente.
return <MoviePage categoryId={linkUrl} />