I want to create routing for overlay modal with parent page in background. Just like in instagram.com , When you click create icon it takes u to "/create/select" while the parent page is still in background.
I tried to implement this in my own page, but it didn't seem to work, it renders the whole new page instead of parent page.
function Routes(){
return(
<Router>
<Switch>
<Route path = "/login" component = {LoginPage} />
<Route path = "/signup/name" component = {NamePage} />
<Route path = "/signup" component = { SignupPage } />
<MainContainer>
<Route path = "/" exact component = {HomePage} />
<Route path = "/explore" component = {Overlay} />
</MainContainer>
</Switch>
<Route path = "/create" children = {<Overlay />}/>
</Router>
)
}function MainContainer(props: any){
return(
<userContext.Provider value = {currentUser}>
<div id = "main-container">
<NavComponent />
<div className = "main-container-right">
<HeaderComponent />
<main id = "container">
{props.children}
</main>
</div>
</div>
</userContext.Provider>
)
}It works when I remove exact from the "/" route, but I want the router switch page in "/explore". Is there anything I am doing wrong here?
If it's overlaying the background (parent) component, do you really need to change the route path? If so, my answer may be incomplete.
For overlaying, just put the overlayed component inside the parent's render function. However, you can use the parent's state to decide whether the child/overlay gets rendered.
For example:
render() {
return (
{this.state.overlay === true && <Overlay />}
)
}
This uses a property in the state called overlay - which should likely be false by default. Then just use a function in the parent component to toggle this on/off. You can pass this toggle in to the overlay function in order to close out the overlay.