Estoy practicando reaccionar. Tengo algunos cuadros que se muestran en la interfaz de usuario y hacer clic en un cuadro en particular debería abrir una página correspondiente a ese cuadro. Por ejemplo, si hace clic en el cuadro 1, debería abrir una página (otro componente) que muestra el texto "Caja 1 en la que se hizo clic". Actualmente, solo puedo registrar la identificación del cuadro en la consola, pero no sé cómo redirigir. A continuación se muestra mi código.

Aplicación.js

 import React from 'react' import boxes from './data' import Box from './Box' import './style.css' export default function App(props) { const [squares, setSquare] = React.useState(boxes) function toggle(id){ console.log(id) } const squareElements = squares.map(sqaure => ( <Box key={sqaure.id} id={sqaure.id} on={sqaure.on} toggle={toggle} /> )) return ( <main> {squareElements} </main> ) }

Caja.js

 import React from 'react' export default function Box(props) { const styles = { backgroundColor : props.on ? "black" : "white" } return ( <div style={styles} className='box' onClick={() => props.toggle(props.id)} ></div> ) }

Este es el componente que quiero mostrar al hacer clic en un cuadro.

BoxInfo.js

 import React from 'react' export default function BoxInfo(props) { return ( <h2>Clicked {props.id}</h2> ) }