I am seeking assistance in updating the Landy out of the box application from https://github.com/Adrinlol/landy-react-template
In a standard React/Javascript model, I would typically write code like the following:
<Route path='/thanks' exact element={<ProtectedRoute><ThankyouPage/></ProtectedRoute>} />
<Route path='/revised' exact element={<ProtectedRoute><ThankyouEditPage/></ProtectedRoute>} />
However, the template is more functionally based and I am unsure how to customize this TypeScript model.
const App = () => (
<BrowserRouter>
<I18nextProvider i18n={i18n}>
<Router />
</I18nextProvider>
</BrowserRouter>
);
const Router = () => {
return (
<Suspense fallback={null}>
<Styles />
<Header />
<Switch>
{routes.map((routeItem) => {
return (
<Route
key={routeItem.component} path={routeItem.path} exact={routeItem.exact}
component={lazy(() => import(`../pages/${routeItem.component}`))}
/>
);
})}
</Switch>
<Footer />
</Suspense>
);
};
My query is regarding adding a new Route and its placement within the code. Any suggestions?