protestant-coral

Routing doesn't works!

I have exactly made a lazy loading route called about and called that via link component! Don't know why but every time it changes it's path on the url bar but the content of that page is not displayed!

7 Replies

extended-salmon•2y ago

protestant-coralOP•2y ago

This is the problem! There is no error in console Simply it doesn't work! Should I share my code?

extended-salmon•2y ago

yep would hel p

protestant-coralOP•2y ago

my bad !! it was working but i didn't see it! it was appending the conntent of the page to my exsiting page content ! and i was scrolling and suddenly found that! but shouldn't it replace my page content with that page content? I mean I was expecting that!

import { createLazyFileRoute } from "@tanstack/react-router";

export const Route = createLazyFileRoute("/about")({
  component: About,
});

function About() {
  return <div className="p-2">Hello from About!</div>;
}

import { createLazyFileRoute } from "@tanstack/react-router";

export const Route = createLazyFileRoute("/about")({
  component: About,
});

function About() {
  return <div className="p-2">Hello from About!</div>;
}

import { createRootRoute } from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/router-devtools";
import IntroButton from "../components/RootPage/IntroButton";
import { Outlet, Link } from "@tanstack/react-router";

//imports

export const Route = createRootRoute({
  component: () => (
    <>
      <div className="bg-black h-[100vh] p-4 relative overflow-hidden text-white">
        <Link to="/">Hi I am here!</Link>
        <img src="logo.svg" alt="Tuku-Retail-Logo" />
        <h1 className=" text-4xl mt-28 ml-16">
          <span className="text-4xl bg-primary-pink p-2 rounded-full">Managing</span> the POS with a digital <br />
          <span className="mt-5 inline-block ">fine grained</span>.
        </h1>
        <img className="w-80 mx-auto mt-32" src="curvy.svg" alt="a design" />

        <div className="flex pb-4 h-72 justify-end">
          <div className="w-96  border-primary-pink border-r-8 border-b-8 flex flex-col justify-evenly">
            <IntroButton label="Employee" color="bg-primary-pink" text_color="text-white" />
            <IntroButton label="Owner" color="bg-white" text_color="text-black" />
          </div>
        </div>

        {/* {floating things here...} */}
        <div className="bg-primary-pink w-[40rem] h-[40rem] absolute top-3/4 right-2/3 rounded-full">
          <img className="w-80 z-50 absolute -top-56 left-72" src="root.svg" alt="a lady cashier" />
        </div>
        <div className="absolute transform -rotate-12 -top-0 right-72 ">
          <div className="bg-zinc-900 w-36 h-36 rounded-full absolute"></div>
          <div className="bg-zinc-900 w-36 h-36 rounded-full absolute left-48"></div>
          <div className="bg-zinc-900 w-36 h-36 rounded-full absolute top-36 left-24"></div>
        </div>
      </div>
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
});

import { createRootRoute } from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/router-devtools";
import IntroButton from "../components/RootPage/IntroButton";
import { Outlet, Link } from "@tanstack/react-router";

//imports

export const Route = createRootRoute({
  component: () => (
    <>
      <div className="bg-black h-[100vh] p-4 relative overflow-hidden text-white">
        <Link to="/">Hi I am here!</Link>
        <img src="logo.svg" alt="Tuku-Retail-Logo" />
        <h1 className=" text-4xl mt-28 ml-16">
          <span className="text-4xl bg-primary-pink p-2 rounded-full">Managing</span> the POS with a digital <br />
          <span className="mt-5 inline-block ">fine grained</span>.
        </h1>
        <img className="w-80 mx-auto mt-32" src="curvy.svg" alt="a design" />

        <div className="flex pb-4 h-72 justify-end">
          <div className="w-96  border-primary-pink border-r-8 border-b-8 flex flex-col justify-evenly">
            <IntroButton label="Employee" color="bg-primary-pink" text_color="text-white" />
            <IntroButton label="Owner" color="bg-white" text_color="text-black" />
          </div>
        </div>

        {/* {floating things here...} */}
        <div className="bg-primary-pink w-[40rem] h-[40rem] absolute top-3/4 right-2/3 rounded-full">
          <img className="w-80 z-50 absolute -top-56 left-72" src="root.svg" alt="a lady cashier" />
        </div>
        <div className="absolute transform -rotate-12 -top-0 right-72 ">
          <div className="bg-zinc-900 w-36 h-36 rounded-full absolute"></div>
          <div className="bg-zinc-900 w-36 h-36 rounded-full absolute left-48"></div>
          <div className="bg-zinc-900 w-36 h-36 rounded-full absolute top-36 left-24"></div>
        </div>
      </div>
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
});

it simply applying the content after my page content! like attaching to the tree!

protestant-coralOP•2y ago

you can see that welcome home element was added to it! instead of removing my root route! Should I shift All my content to index route / ??

protestant-coralOP•2y ago

Thanks ! XD! I debugged my own code! It was like we cant put any content on root route ! the first page of site is being represent by index route! So I ship all the content to my index page! And It's working fine! Root Auto show the conttent of index page atfirst !

Gaming

Programming

Routing doesn't works!

Did you find this page helpful?