跨多个组件文件进行路由-React Router

如何解决跨多个组件文件进行路由-React Router

我正在创建一个小型Game应用程序。这个想法是让高级App组件控制一些身份验证路由，以及一个GameManager组件，该组件本质上是一个状态管理器，负责渲染Lobby和Game对象，以及进行API调用。我正在使用React-Router以及ContextAPI在各个组件之间共享所需的状态。

App.js

<Router>
    <Navbar />
    <Row type="flex" justify="center" align="middle" style={{border: "1px solid red"}}>
        <Switch> 
            <Route exact path="/" component={Welcome} />
            <Route path="/login" component={Login}>
                {isAuthenticated ? <Redirect to='/home' /> : null}
            </Route>
            <Route path="/register" component={Register} >
                {isAuthenticated ? <Redirect to='/home' /> : null}
            </Route>
            <GameProvider>
                <Route path="/home" component={GameManager} />
            </GameProvider>
            <Route component={Error} />
        </Switch>
    </Row>
</Router>

然后，我想使用Game组件进一步控制路线并根据需要渲染组件。因此，我将让GameManager组件在/ lobby时拉入大厅，在/ game时拉起游戏，等等。原因是我使用的是SocketIO，并且仅在GameManager中定义。因此，我需要根据需要将Lobby和Game组件的状态拉入GameManager，以便能够传递相关对象。以前，我在App.js中拥有所有路由，并从那里渲染了所有组件，但是由于我在App级别上没有Context，因此将所有服务器端逻辑都放在这里是没有意义的。

GameManager.js 简化

export default function GameManager(props){

    function handleCreateLobby(){
        props.history.push('/lobby'); 
    }

    return (
        <div>
            <Button type="primary" shape="round" onClick={handleCreateLobby}>Create Lobby</Button>
            <Switch>
                <Route path="/lobby" render={(props) => <Lobby getStateUp={handleStateHere} {...props} />} />
                //And so on..
            </Switch>
        </div>
    )
}

从本质上讲，我的问题是如何划分跨组件文件的路由？目前，我认为问题是当我更改URL时，GameManager组件消失了，因此无法呈现Lobby。我希望GameManager组件能够保留下来，并成为渲染更多路线以及处理某些逻辑的控制器。

我在线上进行了研究，但是所有问题和教程都在单个文件中使用“路线”。

感谢您的帮助！