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

Question

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 (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/Login" component={Login} />
<Route path="/CreateAccount" component={CreateAccount} />
<Route path="/Account_Recovery" component={Recovery} />
<Route path="/RR_One" component={RR_One} />
</Switch>
</Router>
);
}
The Create Account Page as it exists now:
class CreateAccount extends React.Component {
render() {
return (
<Router>
<PageHeader pageTitle="Create a Free Account"/>
<div className="pageBody">
<div className="centerHalf">
<Route path="/CreateAccount/1" component={PageOne} />
<Route path="/CreateAccount/2" component={PageTwo} />
<Route path="/CreateAccount/3" component={PageThree} />
</div>
<p>Paragraph outside of the changing div.</p>
</div>
</Router>
)}};
An example component PageThree (the others are similar for now, just linking between each other):
class PageThree extends React.Component {
render() {
return (
<div>
<p>Page Three</p>
<Link to={{pathname: "/CreateAccount/2"}}>Go to page 2</Link> <br />
<Link to={{pathname: "/Login"}}>Complete</Link>
</div>
)}};

Answer 1

The solution was actually very simple: I had misunderstood the purpose of the Router component, and the nesting of these (not of the switch statement or the routes) was the real problem. By removing the inner Router component (in my case, the one in the CreateAccount component) the navigation was able to flow smoothly from page three back to an external page.
class CreateAccount extends React.Component {
render() {
return (
<div>
<PageHeader pageTitle="Create a Free Account"/>
<div className="pageBody">
<div className="centerHalf">
<Route path="/CreateAccount/1" component={PageOne} />
<Route path="/CreateAccount/2" component={PageTwo} />
<Route path="/CreateAccount/3" component={PageThree} />
</div>
<p>Paragraph outside of the changing div.</p>
</div>
</div>
)}};