Soy nuevo en React y estoy creando un juego de Tic-Tac-Toe. Quiero crear una página de inicio con tres opciones:
Al hacer clic en el botón de inicio, quiero renderizar el componente que consiste en el juego original. Al hacer clic en las reglas, quiero mostrar una página que muestre las reglas. He creado componentes separados para los tres botones y también para el juego en sí.
Captura de pantalla: página de inicio
Para redirigir a una nueva página que contiene uno de sus componentes, puede usar el enrutador de reacción: https://v5.reactrouter.com/web/guides/quick-start
y use su botón como enlace o use el enlace useHistory en su función onClick
Si solo desea representar un componente en la página actual cuando hace clic en un botón, simplemente puede usar una condición con un estado como este:
... const [isStart, setIsStart] = useState(false) ... {isStart ? <Start> : <Button onClick={() => setIsStart(true)}>Start</Button>}Debe usar un React Router que es responsable de mostrar diferentes componentes en diferentes rutas de URL, por ejemplo:
import React from 'react'; import { Switch, Route } from 'react-router-dom'; import LandingPage from './landing-page/LandingPage'; import Details from './details/Details'; const Router = () => { return ( <React.Fragment> <Switch> <Route path={`/`} exact render={() => <LandingPage />} /> <Route path={`/details`} exact render={() => <Details />} /> </Switch> </React.Fragment> ); }; export default Router;y luego simplemente redirige a esas rutas al hacer clic:
handleClick = (e) => { e.preventDefault(); history.push('/results'); } return ( <Button onClick={handleClick}>Results</Button> );