reactjs - How can I nest dynamic page routed components in React Routers?

itemprop="text">

I'm working on a dynamic webpage using
React. I'm using a Switch component from React Routers to change from the home page to
various other pages, as needed by the user. I want the following routing to create a new
account:

Home page >> login page >>
Create account (1) > (2) > (3) >> back to login or home page
In
words: The user should be able to navigate from the home page to a login page, from the
login page to a create account page with three steps (each a unique component), and from
the third step back to the home
page.

My trouble lies in getting from
the third create-account page back to the home or login page. I can create links that
bring me from Page 1 > 2, 2 > 1, 2 > 3, or 3 > 2. But I can't make page
three render a link that will bring me back to
Home.

I initially had a switch statement in my
Create Account page rendering three separate components. If I set the route home inside
of this switch statement, the div would render Home inside of it, as expected. If I
simply omitted the route, the page would fail to render when I clicked on the link, but
clearly had the right path because it would load properly upon refresh.
I've
also tried:
Moving the Router to circumscribe the entire component, rather
than just the Switch component.
Moving the Route to home before anything else
in the document - as expected this just rendered the home page above the create account
page upon activating the route.
Using a Redirect inside and outside of the
Switch statement.
A really nasty method of rendering inside the div the value
of a "component" key from inside an object, and manually updating the values in that
object when the links are clicked, rather than using anything even vaguely associated
with React Routers. This worked better than it should have, but not
perfectly.

**As kind of a side note I've been
told (though I have no personal experience) that Vue has a 'stepper' that could be used
to navigate through pages 1, 2, and 3, to avoid using a nested router at all. Is there
such a thing in React or
React-Routers?

The
App:

function App() {

            return (

 
 

            
             component={Login} />

             component={CreateAccount} />
             component={Recovery} />
             />
 
 


            );
}

The
Create Account Page as it exists
now:

class CreateAccount extends
            React.Component {
 render() {
 return (


            
 

             className="pageBody">

             className="centerHalf">

             component={PageOne} />
             component={PageTwo} />
             component={PageThree} />

 

Paragraph outside of the changing div.