Javascript 如何使用react router设置嵌套路由以使用react JS加载嵌套上下文？

我需要使用与react中的上下文加载同步的

react路由器

实现嵌套路由机制

其思想是加载模块，并为每个模块加载页面

在应用程序加载（

App

）时，我需要加载

appContext

对于每个模块更改，我都需要重新加载

moduleContext

，但是不需要再次加载

appContext

简单地说：

在应用程序加载时加载appContext

默认模块加载时加载

moduleContext

来自同一模块的另一个页面==>不加载任何内容，因为它同时具有两个有效上下文

来自另一个模块的另一个页面==>仅加载

moduleContext

，因为

appContext

仍然有效

以下是我的组件：

class App extends Component {
    render = () => {
        let routes = null;
        if (!isAuthenticated()) {
            routes = <Auth />;
        } else {
            routes = (
                <Switch>
                    <Route exact path="/logout" render={() => logout()} />
                    <Route exact path="/auth" render={() => logout()} />

                    <Route component={AppLoader} />
                </Switch>
            );
        }

        return <BrowserRouter>{routes}</BrowserRouter>;
    };
}

class AppLoader extends Component {
    render = () => {
        return (
            <AppContextLoader>
                <ModulesLoader {...this.props} />
            </AppContextLoader>
        );
    };
}

class ModulesLoader extends Component {
    render = () => {
        let { location } = this.props;

        return (
                <Switch>
                    <Route
                        path="/module1"
                        render={props => <Module module="module1" />}
                    />
                    <Route
                        path="/module2"
                        render={props => <Module module="module2" />}
                    />
                </Switch>
        );
    };
}

class Module extends Component {
    static propTypes = {
        module: PropTypes.string.isRequired
    };

    render = () => {
        let { module } = this.props;

        return (
            <ModuleContextLoader module={module}>
                <h1>Load Page Here</h1>
            </ModuleContextLoader>
        );
    };
}

类应用程序扩展组件{
渲染=（）=>{
让routes=null；
如果（！isAuthenticated（））{
路线=；
}否则{
路线=(
注销（）}/>
注销（）}/>
);
}
返回{routes}；
};
}
类AppLoader扩展组件{
渲染=（）=>{
返回(
);
};
}
类ModulesLoader扩展组件{
渲染=（）=>{
设{location}=this.props；
返回(
}
/>
}
/>
);
};
}
类模块扩展组件{
静态类型={
模块：PropTypes.string.isRequired
};
渲染=（）=>{
设{module}=this.props；
返回(
在这里加载页面
);
};
}

我的问题是，每次页面更改时，我都会重新加载

appContext

和

moduleContext

而这并不是预期的行为

---

如何正确嵌套路由器以获得我想要的结果？

你能提供代码沙盒吗？有关嵌套路由，请参阅。在路由中，您可以使用React.LazySwitchs以独占方式延迟加载组件渲染路由，即仅第一个匹配路由。如果需要同时呈现多个组件/路由，则需要使用路由器。