Quiero que la pantalla de mi juego solo se muestre en la ruta '/ juego', pero cuando inicio con el método "nuevo Phaser.Game (config)", comienza a mostrarse en cada ruta '/ inicio', ruta predeterminada '/', '/error', '/juego' y etc.
game.js
import Phaser from 'phaser'; import LoadScene from './scenes/LoadScene.js'; import MenuScene from './scenes/MenuScene.js'; export const config = { type: Phaser.AUTO, width: 800, height: 600, scene: [ MenuScene, LoadScene] }; const game = new Phaser.Game(config); gamepage.js
import config from '../../phaser/game.js'; import React from 'react'; export default class GamePage extends React.Component { render() { return <> <Game /> </>; } } routes.js
import React from 'react'; import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; import ErrorPage from '../pages/error/index.js'; import Home from '../pages/home/index.js'; import GamePage from '../pages/game/index.js'; export default class Rotas extends React.Component { render() { return <> <Router> <Routes> <Route path="/" element={<Home />} /> <Route path="/game" elememnt={<GamePage />} /> <Route path="*" element={<ErrorPage />} /> </Routes> </Router> </> }; }El objeto de config en new Phaser.Game(config); acepta una opción parent , que especifica el elemento que contendrá el lienzo del juego. Si no está undefined , se incluirá en el cuerpo del documento ( su caso ).
Puede especificar null para que no se incluya en ninguna parte, y usted es responsable de agregarlo al DOM.
Consulte https://newdocs.phaser.io/docs/3.55.2/Phaser.Types.Core.GameConfig#GameConfig para conocer las opciones disponibles.
También puede echar un vistazo a Cómo integrar Phaser en React mientras usan ese enfoque