React Router如何实现后台保留父页面的Overlay Modal路由

问题原因 #

你的实现核心问题出在<Switch>组件的匹配逻辑和<MainContainer>的嵌套位置上：

1. React Router v5的<Switch>只会渲染第一个路径匹配的子元素，且子元素应当为<Route>或<Redirect>组件，你直接将<MainContainer>放在<Switch>内部作为子节点，只有当<MainContainer>内部的某条路由匹配成功时，整个<MainContainer>才会被渲染。
2. 当你给/路由加上exact属性时，访问/create/select路径时，<Switch>内部的/login、/signup、/（要求精确匹配不满足）、/explore全不匹配，因此整个<MainContainer>不会被渲染，只剩下全局的<Overlay>，自然就呈现为全新页面。
3. 当你去掉exact属性时，/create路径会匹配到/路由，因此<MainContainer>会被渲染，模态框效果正常，但此时访问/explore路径时，/路由也会匹配成功，导致HomePage和/explore对应的Overlay同时渲染在内容区，出现冲突。

解决方案 #

调整路由结构，将不需要公共布局的登录注册类路由放在<Switch>中优先匹配，剩余路由统一走公共布局<MainContainer>，模态框路由保持全局平级即可，修改后代码如下：

function Routes(){
    return(
        <Router>
            <Switch>
                {/* 不需要公共布局的路由优先匹配 */}
                <Route path="/login" component={LoginPage} />
                <Route path="/signup/name" component={NamePage} />
                <Route path="/signup" component={SignupPage} />
                {/* 剩余所有路由都走公共布局 */}
                <Route path="*">
                    <MainContainer> 
                        <Switch>
                            {/* 这里加exact不会影响模态框路由，因为MainContainer一定会渲染 */}
                            <Route path="/" exact component={HomePage} />
                            <Route path="/explore" component={Overlay} />
                        </Switch>
                    </MainContainer>
                </Route>
            </Switch>
            {/* 全局模态框路由，只要路径匹配/create就渲染，父页面会保留在下层 */}
            <Route path="/create" children={<Overlay />}/>
        </Router>
    )
}

调整后你可以保留/路由的exact属性，访问/explore时会正常替换内容区的HomePage，访问/create相关路径时也会正常保留父页面渲染模态框。

内容的提问来源于stack exchange，提问作者Billjesh Baidya