Ant Design: How can a SubMenu be turned into a clickable link?

Currently, I am developing a Next.js application and utilizing antd's Menu and Submenu components for my NavBar. My goal is to make the SubMenu items clickable links. How can I achieve this functionality?

<Menu className={styles.menuContainer} mode={mode} dashed={false}>
    <Menu.Item key='setting:1'>
      <Link href='/About'>About</Link>
    </Menu.Item>
    // Link this to '/resources'
    <SubMenu key='SubMenu' title='Resources'>
      <Menu.Item key='setting:2'>
        <Link href='/blog'>Blog</Link>
      </Menu.Item>
      <Menu.Item key='setting:3'>
        <Link href='/faq'>FAQ</Link>
      </Menu.Item>
      <Menu.Item key='setting:4'>
        <Link href='/events'>
          Events
        </Link>
      </Menu.Item>
    </SubMenu>
  </Menu>
javascriptcssreactjsnext.jsantd

Answer №1

When creating links, it is important to utilize to="#" instead of href="#". Here is an example:

<Link to='/contact'>Contact</Link>

Answer №2

You might want to consider using this property

<Link href='/About' passHref><a>About</a></Link>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting up paths in NextJS can be easily done by following these steps

I am facing a situation where I have the addresses /blog/post-1 and /blog/post-2, but I wish to rewrite them to /post-1 and /post-2 respectively. In order to achieve this, I made changes in the next.config.js file as shown below: async rewrites() { retur ...

next.jsurl-rewriting

What is the best way to incorporate multiple HTML buttons that utilize the same JavaScript function within looped results?

My HTML page contains the following codes: <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="metin" placeholder="Geben Sie Artikel Nr" style="width: 30%;"/><br/><br/> <input type="button" class="sin ...

javascriptphpjqueryhtmlforms

Is there a way to alter the text color using JavaScript on the client side?

Is there a way to change the color of a list item in a ul based on whether it is a palindrome or not? Here is the JavaScript file I am working with: function isPalindrome(text){ return text == text.split('').reverse().join(''); } c ...

javascripthtmlformsstylesevent-listener

jQuery is experiencing compatibility issues with node-webkit

Currently, I am experimenting with node-webkit as a beginner in nodejs. The main content of my webpage consists of a simple html page which includes a script called main.js. To install jquery, I used the command npm install jquery index.html <!-- i ...

javascriptjquerynode.jsnode-webkit

The Facebook messenger checkbox plugin does not appear to be displaying correctly

I have integrated the Facebook Messenger Checkbox Plugin into my AngularJS application by following the guide provided at this link. Initially, I was able to successfully display the messenger checkbox plugin on a page. However, upon navigating to another ...

javascriptjqueryangularjsfacebookfacebook-messenger

Comparing Angular extend to $provide.decorator: A breakdown

I find myself in a state of confusion. Can you please provide some clarity on the distinction between angular.extend() and $provide.decorator? When and why would one use the latter option? Does decorator serve a different purpose compared to extend? Desp ...

javascriptangularjsextendingangular-decorator

tips for revealing content in a div by sliding from right to left

I came across a fiddle that animates from bottom to top when the cursor hovers over it. Is there a way to modify it so that it animates from right to left on click, and then hides the content? After hiding the content, I would like to have a button that a ...

javascriptjquery

What is the best way to target CSS only to elements that do not have a parent with a specific class?

Striving to preserve the existing CSS in the codebase. .my-new-class { .existing-class { ...implementing new styles } } .existing-class { ...maintaining old styles } I attempted a technique that I know won't work and understand why: ...

csssassancestor

Ensure the backslashes are removed from the AWS Lambda string API response

I have an AWS Lambda function where I am sending a string as my final response let abc= `"phone_exist":"0","calls":"0","lastaction":"0"` callback(null,abc); Output: "\"phone_exist\":\"0\",\"calls\":\"0\",\"l ...

javascriptnode.jsstringaws-lambda

When hovering or mousing over, the text remains stationary and does not follow the scroll bar movement within the

A method I am using involves displaying additional data on hover for a shortened header, like this: Hover behavior However, the text shifts across the page when the scrollbar is used, as shown here: Scrollbar interaction This table showcases HTML, CSS, ...

jqueryhtmlcss

Using PHP and MySQL to create checkboxes populated with data retrieved from a database, and then submitting two parameters

Hey there, I've been struggling with this issue for quite some time. I'm trying to create a list with checkboxes populated from a database that includes [checkbox of car id and value][brand][model]. The goal is to select two cars from the list, ...

javascriptphpjquerymysqlcheckbox

What is the process for altering the color of a table using JavaFX?

In my JavaFX application, I'm working with a table and I want users to be able to change the color of the selected element using a color picker. However, when I attempt the following code: menuBar.setStyle("-fx-background-color:" + settings.getRgbSt ...

javacssjavafx

How to trigger a horizontal scroll on load for a specific ID in HTMLDivElement

Looking for advice on how to make one of the horizontally scrolling DIV containers on a site scroll to a specific position onLoad. The challenge is that this particular container is located far down the page vertically, and we want it to scroll horizontall ...

javascripthtmlscrollcontainersonload

Exploring the contrast of app.use and app.get *within the realm of proxy servers*

Seeking clarification on the distinction between express's app.get() and app.use(). I am aware that app.use is applicable to all HTTP verbs. According to sources, "app.use() adds middleware instead of a route" I am curious about why this particular ...

reactjsexpresshttp-proxy

Shift the column upwards for devices with smaller screens

I need help with a layout issue I am facing. Currently, my layout looks like this: [blurb] (8) [form] (4) However, I want the [blurb] to take up col-md-8 and the [form] to take up col-md-4 so that they are full width on smaller devices. On smaller devic ...

csstwitter-bootstrap

Vue JS Issue: Button click does not trigger tooltip update

I am currently utilizing Vue 3 alongside Bootstrap 5.2. In my project, I have successfully implemented a tooltip by the following method: App.vue <script> import { Tooltip } from "bootstrap"; export default { mounted() { Array.from( ...

javascriptvue.jstooltipbootstrap-5

Seeking assistance with using JavaScript to filter posts from Contentful for a Next.js website

Currently, I am integrating a Next.js blog with Contentful and employing queries to display posts on the homepage. While I can easily use .filter() to feature certain posts based on a boolean value, I am struggling to figure out how to fetch posts that mat ...

javascriptreactjsnext.jscontentful

Displaying an error from the DOM of one page on a React page

Just started using React. I encountered a strange issue where my React page A was displaying a query selector error from Page B. The error seems to keep looping infinitely until I navigate to Page B. Here is the code snippet in Page B: Function update(){ ...

reactjs

centered logo in a flexbox header

Having trouble with Flex for the first time. Despite reading and experimenting, I still can't figure it out. Any suggestions on how to accomplish this? Check out an example ...

cssflexbox

What is the reason that I am unable to utilize the React and Express libraries from the global space when installed via npm i -g pkgName, yet I am able to use react-scripts from the global space?

Could there be knowledge missing that is preventing this import to work? It seems odd that we can access other globally installed modules like jest, live-server, react-scripts, http-server, but not this one. Any guidance on resolving this issue would be ...

reactjsexpressnpm