Me gustaría renderizar un componente Tabel en la ruta "/ juego" después de hacer clic en un grupo de botones de dificultad. Por lo tanto, la aplicación debe pasar de la ruta "/" a "/juego" y generar una tabla adecuada según el estado de dificultad establecido en DifficultyButtons.js. Administro componentes de ruta en App.js así: `
<Route path='/' render={() => <DifficultyButtons/>} /> <Route path='/game' render={() => <Table/>} />`
En el archivo DifficultyButtons.js, la redirección comienza al hacer clic en un botón que establece un estado de "dificultad" que se utilizará en el archivo Table.js, donde mi propósito es representar una tabla proporcionalmente al nivel de dificultad establecido. Aquí está Table.js:
`
const location = useLocation(); const rows = N*location.state; const columns = M*location.state; return ( <Table responsive> <tbody> {Array.from({length: rows}).map((_, row_index) => ( <tr key={row_index}> {Array.from({length: columns}).map((_, column_index) => ( <td key={column_index}> try </td> ))} </tr> ))} </tbody> </Table> </div> )` ¿Es esta la forma correcta de representar la tabla proporcional? Me gustaría entender por qué la redirección a "/juego" no funciona. Código para la redirección en DifficultButtons.js:
{selected ? ( <Redirect to={{ pathname: '/game', state: {level:difficulty} }}¿Es esta la forma correcta de representar la tabla proporcional?
Esta es una pregunta bastante subjetiva, pero no veo ningún problema manifiesto con la forma en que está mapeando la "matriz 2d".
Me gustaría entender por qué la redirección a
"/game"no funciona.
Al redirigir y pasar el estado, está pasando el nivel de dificultad en state.level
<Redirect to={{ pathname: '/game', state: { level: difficulty } }} /> pero solo hace referencia a location.state en el componente de la ruta de destino
const location = useLocation(); const rows = N * location.state; const columns = M * location.state; Dado que location.state es un objeto, es probable que el resultado de los cálculos sea que tanto las rows como las columns sean NaN s.
Elimine la referencia del valor del level pasado del estado de la ruta, proporcione un valor predeterminado seguro para el level si no se pasa en el estado de la ruta, y también un valor predeterminado para state si un usuario navega directamente a "/game" donde el estado de la ruta será simplemente indefinido .
const location = useLocation(); const { state: { level = 0 } = {} } = location; const rows = N * level; const columns = M * level; Usted pregunta sobre la redirección en respuesta a un clic de botón y, en este caso, no puede simplemente llamar/devolver un componente de Redirect desde una devolución de llamada y esperar que afecte cualquier cosa que se esté procesando. Para ello, deberá emitir una redirección imperativa. Use el objeto de history para redirigir con el estado apropiado.
const history = useHistory(); ... // in some button's onClick handler history.replace({ pathname: '/game', state: { level: difficulty } });En lugar de 'Redireccionar', puede usar 'Enlace' de 'react-router-dom'.
<Link to="/game?level=difficulty" />Puede visitar la documentación oficial de v5 en https://v5.reactrouter.com/web/api/Link