[add] routing in the app component

Author: AngyDev

src/scripts/features/App/App.js

@@ -3,7 +3,11 @@ import Sidebar from "../../components/Sidebar/Sidebar";
 import Main from "../../components/Main/Main";
 import { StepContext } from "../../context/StepContext";
 import { UserProvider } from "../../context/UserContext";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter, Route, Switch } from "react-router-dom";
+import Layout from "../../components/Layout/Layout";
+import ContactDetails from "../../components/ContactDetails/ContactDetails";
+import InvestmentPlans from "../../components/InvestmentPlans/InvestmentPlans";
+import InvestmentPreferences from "../../components/InvestmentPreferences/InvestmentPreferences";
 
 export default function App() {
 
@@ -13,10 +17,17 @@ export default function App() {
         <StepContext.Provider value={[step, setStep]}>
             <UserProvider >
                 <BrowserRouter>
-                    <div className="app-container">
-                        <Sidebar />
-                        <Main />
-                    </div>
+                    <Switch>
+                        <Route exact path="/">
+                            <Layout><ContactDetails /></Layout>
+                        </Route>
+                        <Route path="/step2">
+                            <Layout><InvestmentPlans /></Layout>
+                        </Route>
+                        <Route path="/step3">
+                            <Layout><InvestmentPreferences /></Layout>
+                        </Route>
+                    </Switch>
                 </BrowserRouter>
             </UserProvider>
         </StepContext.Provider>