ReactJS: Components under one another

Alright, my initial idea was to have the page split in half. One half would follow a set path, and the other would follow a different path.

Upon clicking on one side, it would move over and cover the other half and the path would be underneath. For instance, click on Path 1 and it would move and cover the opposite half of the screen allowing access to Path 1, and the same vice-versa.

However I am having trouble setting this up to where it will render the page needed before the current page moves, and perhaps unrender the opposite path (for better performance maybe).

---

Any help, information, tips would be greatly appreciated. I don't need it written for me, just some direction would be excellent.

Thanks in advance