T
TanStack•3y ago
robust-apricot

How to look for route changes in beta-68

I have this code here: 
const rootRoute = new RootRoute({
    component: () => <App />,
})

const indexRoute = new Route({
    getParentRoute: () => rootRoute,
    path: ROUTES.ROOT,
    component: Project,
})

const projectRoute = new Route({
    getParentRoute: () => rootRoute,
    path: ROUTES.PROJECTS,
    component: Project,
})

const processingRoute = new Route({
    getParentRoute: () => rootRoute,
    path: ROUTES.PROCESSING,
    component: Processing,
})

const userProfileRoute = new Route({
    getParentRoute: () => rootRoute,
    path: '/profile/$page',
    component: Profile,
    parseParams: ({ page }) => ({
        page: Number(page) ?? 1,
    }),
    stringifyParams: ({ page }) => ({
        page: `${page}`,
    }),
})

const resourcesRoute = new Route({
    getParentRoute: () => rootRoute,
    path: ROUTES.RESOURCES,
    component: Resources,
    parseParams: ({ page }) => ({
        page: Number(page) ?? 1,
    }),
    stringifyParams: ({ page }) => ({
        page: `${page}`,
    }),
})

const routeTree = rootRoute.addChildren([indexRoute, projectRoute, processingRoute, userProfileRoute, resourcesRoute])

const history = createHashHistory()
const router = new ReactRouter({ routeTree, history })
const rootRoute = new RootRoute({
    component: () => <App />,
})

const indexRoute = new Route({
    getParentRoute: () => rootRoute,
    path: ROUTES.ROOT,
    component: Project,
})

const projectRoute = new Route({
    getParentRoute: () => rootRoute,
    path: ROUTES.PROJECTS,
    component: Project,
})

const processingRoute = new Route({
    getParentRoute: () => rootRoute,
    path: ROUTES.PROCESSING,
    component: Processing,
})

const userProfileRoute = new Route({
    getParentRoute: () => rootRoute,
    path: '/profile/$page',
    component: Profile,
    parseParams: ({ page }) => ({
        page: Number(page) ?? 1,
    }),
    stringifyParams: ({ page }) => ({
        page: `${page}`,
    }),
})

const resourcesRoute = new Route({
    getParentRoute: () => rootRoute,
    path: ROUTES.RESOURCES,
    component: Resources,
    parseParams: ({ page }) => ({
        page: Number(page) ?? 1,
    }),
    stringifyParams: ({ page }) => ({
        page: `${page}`,
    }),
})

const routeTree = rootRoute.addChildren([indexRoute, projectRoute, processingRoute, userProfileRoute, resourcesRoute])

const history = createHashHistory()
const router = new ReactRouter({ routeTree, history })
I'm upgrading from version beta-38 to beta-68, and now not able to use router.subscribe anymore. Also, on the first startup the app screen is blank, rootTree is not taking the indexRoute by default.
2 Replies
harsh-harlequin
harsh-harlequin•3y ago
Maybe this is what you are looking for: 
const router = new ReactRouter({ 
  routeTree, 
  history,
  onRouteChange: () => { /* Code here */ }
})
const router = new ReactRouter({ 
  routeTree, 
  history,
  onRouteChange: () => { /* Code here */ }
})
robust-apricot
robust-apricotOP•3y ago
Yeah, that worked! But still it's not having / as the default route.

Did you find this page helpful?