refactor react-router fix rootRoute name

src/App.tsx

@@ -1,3 +1,4 @@
+import { TanStackRouterDevtools } from '@tanstack/router-devtools';
 import { CreateStrategyCTAMobile } from 'components/strategies/create/CreateStrategyCTA';
 import { useEffect } from 'react';
 import { NotificationAlerts } from 'libs/notifications';
@@ -36,6 +37,7 @@ export const App = () => {
       <MainMenu />
       <main className="my-80 flex w-full flex-grow flex-col">
         <MainContent />
+        <TanStackRouterDevtools position={'bottom-right'} />
       </main>
       <MobileMenu />
       <ModalProvider />

src/libs/routing/routes/debug.ts

@@ -1,9 +1,9 @@
 import { Route } from '@tanstack/react-router';
-import { rootRoot } from 'libs/routing/routes/root';
+import { rootRoute } from 'libs/routing/routes/root';
 import { DebugPage } from 'pages/debug';
 
 export const debugPage = new Route({
-  getParentRoute: () => rootRoot,
+  getParentRoute: () => rootRoute,
   path: '/debug',
   component: DebugPage,
 });

src/libs/routing/routes/explorer.ts

@@ -1,22 +1,26 @@
-import { redirect, Route } from '@tanstack/react-router';
+import { Route, redirect } from '@tanstack/react-router';
 import { ExplorerType } from 'components/explorer/utils';
-import { rootRoot } from 'libs/routing/routes/root';
+import { rootRoute } from 'libs/routing/routes/root';
 import { ExplorerPage } from 'pages/explorer';
 import { ExplorerTypePage } from 'pages/explorer/type';
 import { ExplorerTypeOverviewPage } from 'pages/explorer/type/overview';
 import { ExplorerTypePortfolioPage } from 'pages/explorer/type/portfolio';
 import { ExplorerTypePortfolioTokenPage } from 'pages/explorer/type/portfolio/token';
 
 export const explorerLayout = new Route({
-  getParentRoute: () => rootRoot,
+  getParentRoute: () => rootRoute,
   path: '/explorer',
 });
 
 export const explorerRedirect = new Route({
   getParentRoute: () => explorerLayout,
   path: '/',
-  loader: () => {
-    redirect({ to: '/explorer/$type', params: { type: 'token-pair' } });
+  beforeLoad: () => {
+    redirect({
+      to: '/explorer/$type',
+      params: { type: 'token-pair' },
+      throw: true,
+    });
   },
 });
 
@@ -29,17 +33,17 @@ export const explorerPage = new Route({
   component: ExplorerPage,
 });
 
-export const explorerResultLayout = new Route({
-  getParentRoute: () => explorerPage,
-  path: '$slug',
-});
-
 export const explorerTypePage = new Route({
   getParentRoute: () => explorerPage,
   path: '/',
   component: ExplorerTypePage,
 });
 
+export const explorerResultLayout = new Route({
+  getParentRoute: () => explorerPage,
+  path: '$slug',
+});
+
 export const explorerOverviewPage = new Route({
   getParentRoute: () => explorerResultLayout,
   path: '/',

src/libs/routing/routes/index.ts

@@ -18,14 +18,14 @@ import {
   strategyPortfolioPage,
   strategyPortfolioTokenPage,
 } from 'libs/routing/routes/myStrategies';
-import { rootRoot } from 'libs/routing/routes/root';
+import { rootRoute } from 'libs/routing/routes/root';
 import {
   createStrategyPage,
   editStrategyPage,
 } from 'libs/routing/routes/strategyCreateEdit';
 import { tradePage } from 'libs/routing/routes/trade';
 
-export const routeTree = rootRoot.addChildren([
+export const routeTree = rootRoute.addChildren([
   termPage,
   privacyPage,
   debugPage,

src/libs/routing/routes/legal.ts

@@ -1,16 +1,16 @@
 import { Route } from '@tanstack/react-router';
-import { rootRoot } from 'libs/routing/routes/root';
+import { rootRoute } from 'libs/routing/routes/root';
 import { PrivacyPage } from 'pages/privacy';
 import { TermsPage } from 'pages/terms';
 
 export const termPage = new Route({
-  getParentRoute: () => rootRoot,
+  getParentRoute: () => rootRoute,
   path: '/terms',
   component: TermsPage,
 });
 
 export const privacyPage = new Route({
-  getParentRoute: () => rootRoot,
+  getParentRoute: () => rootRoute,
   path: '/privacy',
   component: PrivacyPage,
 });

src/libs/routing/routes/myStrategies.ts

@@ -1,12 +1,12 @@
 import { Route } from '@tanstack/react-router';
-import { rootRoot } from 'libs/routing/routes/root';
+import { rootRoute } from 'libs/routing/routes/root';
 import { StrategiesPage } from 'pages/strategies';
 import { StrategiesOverviewPage } from 'pages/strategies/overview';
 import { StrategiesPortfolioPage } from 'pages/strategies/portfolio';
 import { StrategiesPortfolioTokenPage } from 'pages/strategies/portfolio/token';
 
 export const myStrategyLayout = new Route({
-  getParentRoute: () => rootRoot,
+  getParentRoute: () => rootRoute,
   id: 'my-strategy-layout',
   component: StrategiesPage,
 });
@@ -16,19 +16,20 @@ export const strategyOverviewPage = new Route({
   path: '/',
   component: StrategiesOverviewPage,
 });
+
 export const strategyPortfolioLayout = new Route({
   getParentRoute: () => myStrategyLayout,
   path: 'strategies/portfolio',
 });
 
-export const strategyPortfolioTokenPage = new Route({
-  getParentRoute: () => strategyPortfolioLayout,
-  path: 'token/$address',
-  component: StrategiesPortfolioTokenPage,
-});
-
 export const strategyPortfolioPage = new Route({
   getParentRoute: () => strategyPortfolioLayout,
   path: '/',
   component: StrategiesPortfolioPage,
 });
+
+export const strategyPortfolioTokenPage = new Route({
+  getParentRoute: () => strategyPortfolioLayout,
+  path: 'token/$address',
+  component: StrategiesPortfolioTokenPage,
+});

src/libs/routing/routes/root.ts

@@ -1,6 +1,6 @@
 import { RootRoute } from '@tanstack/react-router';
 import { App } from 'App';
 
-export const rootRoot = new RootRoute({
+export const rootRoute = new RootRoute({
   component: App,
 });

src/libs/routing/routes/strategyCreateEdit.ts

@@ -1,5 +1,5 @@
 import { Route } from '@tanstack/react-router';
-import { rootRoot } from 'libs/routing/routes/root';
+import { rootRoute } from 'libs/routing/routes/root';
 import { CreateStrategyPage } from 'pages/strategies/create';
 import { EditStrategyPage } from 'pages/strategies/edit';
 
@@ -19,7 +19,7 @@ export interface StrategyCreateSearch {
 }
 
 export const createStrategyPage = new Route({
-  getParentRoute: () => rootRoot,
+  getParentRoute: () => rootRoute,
   path: '/strategies/create',
   component: CreateStrategyPage,
   validateSearch: (search: Record<string, unknown>): StrategyCreateSearch => {
@@ -41,7 +41,7 @@ export interface EditStratgySearch {
 }
 
 export const editStrategyPage = new Route({
-  getParentRoute: () => rootRoot,
+  getParentRoute: () => rootRoute,
   path: '/strategies/edit/$strategyId',
   component: EditStrategyPage,
   validateSearch: (search: Record<string, unknown>): EditStratgySearch => {

src/libs/routing/routes/trade.ts

@@ -1,5 +1,5 @@
 import { Route } from '@tanstack/react-router';
-import { rootRoot } from 'libs/routing/routes/root';
+import { rootRoute } from 'libs/routing/routes/root';
 import { TradePage } from 'pages/trade';
 
 export interface TradeSearch {
@@ -8,7 +8,7 @@ export interface TradeSearch {
 }
 
 export const tradePage = new Route({
-  getParentRoute: () => rootRoot,
+  getParentRoute: () => rootRoute,
   path: '/trade',
   component: TradePage,
   validateSearch: (search: Record<string, unknown>): TradeSearch => {