In my Next.js project, I have organized my files in a folder-based structure like this:
/dashboard/[appid]/users/[userid]/user_info.tsx
When using href={"user_info"} with the built-in Next.js component on a user page, I expect the URL to dynamically point to
/dashboard/app_01/users/123123123/user_info/user_info which is not the desired location.
This is how the Next.js react component is structured:
'use client';
import Link from 'next/link';
import React from 'react';
import Image from 'next/image';
type sidebarbuttonprops = {
text: string,
to?: string,
id: string,
active?: string,
disabled?: string[],
icon?: string,
getButtonValue: (buttonid: string) => void
}
export const SideBarButton = ({ text, to: link, id, active, disabled, icon, getButtonValue }: sidebarbuttonprops) => {
let buttonActive: boolean = id == active ? true : false;
let buttonDisabled: boolean | undefined = disabled?.includes(id);
const handleClick = (e: React.MouseEvent<HTMLElement>) => {
if (!buttonDisabled) {
getButtonValue(id);
}
}
return <Link className="sidebar-button" role='link' href={!buttonDisabled ? link! : ''} replace={false} onClick={handleClick}>
<div className={`sidebar-button__container${buttonActive ? ' button_active' : ''}${buttonDisabled ? ' button_disabled' : ''}`} id={id}>
<div className='sidebar-button__svg'>
{icon != undefined && <Image src={icon!} alt="icon" width={25} height={25} />}
</div>
<div className='sidebar-button__text'>
<span className='sidebar-button__span'>
{text}
</span>
</div>
</div>
</Link>;
}The HTML generated for the link appears as follows:
<a class="sidebar-button" role="link" href="user_info">"[Some divs]"</a>
Even though hovering over the link displays the correct URL of
/dashboard/app_01/users/123123123/user_infoTL;DR: How can I dynamically add the user_info to the current URL without specifying the entire path?