Ahora estoy tratando de aprender React y cómo crear una aplicación de una sola página sin una página de redirección. por lo que cada cambio de interfaz de usuario solo se activará con el botón. Sin embargo, tengo problemas para implementarlo si el botón de activación está en otra vista...
Construyo un código simple para cambiar la vista de la ruta de <Home/> a <Payment/> con un botón.
aplicación.js
import React, {useState, useEffect} from 'react'; import Home from './views/Home'; import Payment from './views/Payment'; import Header from './components/Header'; import Footer from './components/Footer'; function App(props) { const [changePage, setPage] = useState(false); useEffect(() => { console.log(changePage); if (changePage) { setPage(true); } } ); const handleClick = () => setPage(true); return ( <div> <Header/> <button onClick={!changePage ? handleClick : null} > Goto Payment </button> {changePage ? <Payment/> : <Home/>} <Footer/> </div> ); } export default App; El código anterior puede funcionar al hacer clic en el botón. Sin embargo, planeo mover el botón de activación de app.js a ./view/Home , por lo que el código en ./view/home lo configuré con este código
import React from 'react'; function Home(props) { return ( <div> HOME <button onClick={!changePage ? handleClick : null} > Goto Payment </button> </div> ); } export default Home;pero me devuelve un error
Compiled with problems:X ERROR src/views/Home.js Line 8:31: 'changePage' is not defined no-undef Line 8:44: 'handleClick' is not defined no-undef Search for the keywords to learn more about each error.Desde mi código, ¿cómo puedo configurar el botón de activación en el archivo ./view/Home pero aún así cambiar la página en app.js...
por favor ayuda
handleClick y changePage no están disponibles Archivo de Home , debe pasar accesorios a Componente de inicio. (ChangePage no es necesario ya que siempre es falso para Inicio)
pase prop
{changePage ? <Payment/> : <Home handleClick={handleClick} />}Usar asa de utileríaClick
<div> HOME <button onClick={prop.handleClick} > Goto Payment </button> </div>Le recomiendo encarecidamente que consulte la versión 6 de React Router. Está renderizando el componente secundario con rutas anidadas.
Puede pasar cualquier componente secundario para que se represente:
function App() { return ( <Routes> <Route path="Home" element={<Home />}> <Route path=index element={<Home />} /> <Route path=":id"element={<Payment />} /> </Route> </Routes> ); }Y dentro del componente Inicio puede usar el Outlet como marcador de posición que será reemplazado por el componente que pasó. Y use los ganchos useNavigate para alternar el componente secundario
https://reactrouter.com/docs/en/v6/primeros-pasos/overview#rutas-anidadas
En realidad, para ese propósito no necesitas todos esos códigos. quitar useState y useEffect. simplemente use useNavigate y ejecute este código como se muestra a continuación para Home to Pyment
import React from 'react'; import { useNavigate } from "react-router-dom"; function Home(props) { const navigate = useNavigate(); return ( <div> HOME <button onClick={() => { navigate(`/views/Payment`); }} > Goto Payment </button> </div> ); } export default Home;