I am attempting to render a component generated by a route; however, I need the component rendered to a specific element:
https://codesandbox.io/s/bold-feather-yh1bt
Clicking on the "Log It In" link on the home component will route you to the "/Login" component. In this component - clicking on any of the "Window" links renders the component correctly; however, I need the component rendered to the "logincontainer" elementID. How do I pull that off? Thanks All!
You need to move
<Route path="/Login/Win1" component={win1} />
<Route path="/Login/Win2" component={win2} />
<Route path="/Login/Win3" component={win3} />
Inside the logincontainer div.
like this
<div
id="logincontainer"
style={{ backgroundColor: "Aqua", width: "100%", height: "200px" }}
>
<Route path="/Login/Win1" component={win1} />
<Route path="/Login/Win2" component={win2} />
<Route path="/Login/Win3" component={win3} />
</div>
Hope this helps.
<Route> needs to be inside a <Router> but not directly so it is good because of the parent is wrapped inside a <Router>)You can use react portals for that. More info here
render() {
// React does *not* create a new div. It renders the component into `domNode`.
// `domNode` is any valid DOM node, regardless of its location in the DOM.
return ReactDOM.createPortal(
<MyComponent />,
domNode
);
}
