#Get URL using UseLocation

1 messages · Page 1 of 1 (latest)

strange river
#

How to get the current pathname after navigating to another page?

I am using useLocation method to get the URL once I'm clicking on a link so I can choose what component to render. But the response is always the last URL came from and not the new URL I am navigating to.
Any suggestions?

hybrid thicket
#

Are you using dynamic routes?

#

Like app/routes/$slug?

#

If so, you can create a link with the component name as the slug, and use params to get the slug value.

# 
export const loader = async ({ params: { slug } }) => {
  return slug;
};
hybrid thicket
hybrid thicket
#

Actually the slug doesn't have to be the component name, it can be anything.

// app/routes/index.jsx
export default function Index() {
  return (
    <div>
      <h1>Welcome to Remix</h1>
      <ul>
        <li>
          <Link to="/987sd098s7dg098sa7g8df0g9">Some Component</Link>
        </li>
        <li>
          <Link to="/09g7df90g87df06g987dg089d">Another Component</Link>
        </li>
        <li>
          <Link to="/85fd57fg7g5sd87g65s798gf6">Different Component</Link>
        </li>
      </ul>
    </div>
  );
}

// app/routes/$slug.jsx
export const loader = ({ params: { slug } }) => {
  return slug;
};

export default function () {
  const slug = useLoaderData();
  const choice = useRef();

  switch (slug) {
    case '987sd098s7dg098sa7g8df0g9':
      choice.current = <SomeComponent />;
      break;
    case '09g7df90g87df06g987dg089d':
      choice.current = <AnotherComponent />;
      break;
    case '85fd57fg7g5sd87g65s798gf6':
      choice.current = <DifferentComponent />;
      break;
    default:
      break;
  }

  return choice.current;
}
worldly spoke
#

you can use useParams on the client to get the slug. you don't have to send it down from the loader

#

However! I will say that what you're doing sounds a lot like routing. if there are particular things you want to render at particular slugs, just make route files for them! you can have both particular slugs and a wildcard $slug — the particular ones will match when they're supposed to, and then the wildcard will work as a fallback

#

if you're looking at the location at click time, it's going to show the current path, not the next path. the answer is to use routing — handle this on the page you land on, not the page where the link is

strange river
worldly spoke
#

could you share some of your code so I can make sure I understand what you’re trying to do?

hybrid thicket
worldly spoke
# strange river Hey crespo, yes. l am looking for the next page. What's the best suggestion then...

depending on what you're trying to do, if you're looking at the path to decide what to render, that is best done with normal routes instead of if-else-if-else with useLocation().pathname. but I'd like to see what part of the path you're looking at. if the location you're seeing is the old one, that probably means you're looking at it too early

app/routes/
├── current-page.tsx
└── users/
    ├── special-user1.tsx
    ├── special-user2.tsx
    └── $id.tsx
strange river
worldly spoke
#

I'm curious why you want to know that before the transition is complete

strange river
worldly spoke
#

interesting! I see. and because the next page doesn't render until the loader is complete, you can't handle the loading state on the next page