#useRouter

1 messages · Page 1 of 1 (latest)

ancient lightBOT
#

Hi @upper inlet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

In Next.js, you can use the useRouter hook from the next/router package to access the current URL and manipulate it as needed. Here's an example of how you can append /new to the current URL:

import { useRouter } from 'next/router'

function YourComponent() {
  const router = useRouter()

  const navigateToNew = () => {
    const currentPath = router.asPath
    const newPath = `${currentPath}/new`
    router.push(newPath)
  }

  return (
    <button onClick={navigateToNew}>Go to New</button>
  )
}

export default YourComponent

In this example, when the button is clicked, the navigateToNew function is called. This function gets the current URL path with router.asPath, appends /new to it, and then uses router.push to navigate to the new URL.

Please note that this will cause a new page to load if the new path corresponds to a different Next.js page in your pages directory. If you want to change the URL without causing a new page to load, you can use shallow routing (https://nextjs.org/docs/pages/building-your-application/routing/linking-and-navigating#shallow-routing).

Here's how you can do it with shallow routing:

import { useRouter } from 'next/router'

function YourComponent() {
  const router = useRouter()

  const navigateToNew = () => {
    const currentPath = router.asPath
    const newPath = `${currentPath}/new`
    router.push(newPath, undefined, { shallow: true })
  }

  return (
    <button onClick={navigateToNew}>Go to New</button>
  )
}

export default YourComponent

In this case, the URL will change to include /new, but Next.js won't try to load a new page or re-run data fetching methods like getServerSideProps or getStaticProps. Instead, you can watch for changes in the URL and react accordingly in your component.

#

@upper inlet kapa.ai is still learning and improving, please let us know how it did by reacting below

upper inlet
#

'use client';

import Text from './typography/Text';
import Button from './Button';

import { useRouter } from 'next/navigation';

type Props = {
title: string;
buttonTitle: string;
url: string;
};

function TitleButton({ title, buttonTitle, url }: Props) {
const router = useRouter();

const handleButton = () => {
router.push(url);
};
return (
<div className="mb-30px flex items-center justify-between">
<Text size="md" weight="semibold" uppercase>
{title}
</Text>
<Button orange type="button" title={buttonTitle} onClick={handleButton} />
</div>
);
}

export default TitleButton;

i have this component thast accept url. i want that the url will be just add to the current url. but this component is a dynamic component. so sometimes the given url dont need the current url

#

@ancient light 'use client';

import Text from './typography/Text';
import Button from './Button';

import { useRouter } from 'next/navigation';

type Props = {
title: string;
buttonTitle: string;
url: string;
};

function TitleButton({ title, buttonTitle, url }: Props) {
const router = useRouter();

const handleButton = () => {
router.push(url);
};
return (
<div className="mb-30px flex items-center justify-between">
<Text size="md" weight="semibold" uppercase>
{title}
</Text>
<Button orange type="button" title={buttonTitle} onClick={handleButton} />
</div>
);
}

export default TitleButton;

i have this component thast accept url. i want that the url will be just add to the current url. but this component is a dynamic component. so sometimes the given url dont need the current url

ancient lightBOT
#

Let me check the knowledge base for you. One moment! :books:

#

You can modify your handleButton function to check if the url prop starts with a /. If it does, you can treat it as an absolute URL and navigate to it directly. If it doesn't, you can append it to the current URL. Here's how you can do it:

'use client';

import Text from './typography/Text';
import Button from './Button';

import { useRouter } from 'next/router';

type Props = {
  title: string;
  buttonTitle: string;
  url: string;
};

function TitleButton({ title, buttonTitle, url }: Props) {
  const router = useRouter();

  const handleButton = () => {
    if (url.startsWith('/')) {
      // If the URL starts with a '/', treat it as an absolute URL
      router.push(url);
    } else {
      // Otherwise, append it to the current URL
      const currentPath = router.asPath;
      const newPath = `${currentPath}/${url}`;
      router.push(newPath);
    }
  };

  return (
    <div className="mb-30px flex items-center justify-between">
      <Text size="md" weight="semibold" uppercase>
        {title}
      </Text>
      <Button orange type="button" title={buttonTitle} onClick={handleButton} />
    </div>
  );
}

export default TitleButton;

This way, if you pass a url prop like /dashboard, the component will navigate to /dashboard directly. But if you pass a url prop like new, the component will navigate to the current URL with /new appended to it.

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: