using the react MenuItem for an external link but it is putting a / in front of the url

Question

I am using React and creating a menu. I have all the submenus working and pointing to internal links however when I try and add an external link to the menu it always ends up having a / in front.

If you look below at '''<MenuItem title={intl.formatMessage({id: 'MENU.NBSONLINE'})} to='http://www.northernbalanceonline.com' /> ''''

it rendors the URL of /www.northernbalance.com
How do I remove the "/" in the url? See code below.

'''

import React, { useState, useEffect } from 'react'
import { shallowEqual, useSelector } from 'react-redux'
import {MenuItem} from './MenuItem'
import { MenuInnerWithSub } from './MenuInnerWithSub'
import {useIntl} from 'react-intl'
import { UserModel } from '../../../../types'
import { RootState } from '../../../../setup'
import * as levelHelper from '../../../../helper/level.helper'


export function MenuInner() {
  const [isAdmin, setIsAdmin] = useState<boolean>(false)

  const user: UserModel = useSelector<RootState>(({auth}) => auth.user, shallowEqual) as UserModel

  useEffect(() => {
    setIsAdmin(levelHelper.isNBS(user?.type))
  }, [user])

  const intl = useIntl()
  return (
    <>
      <MenuItem title={intl.formatMessage({id: 'MENU.DASHBOARD'})} to='/dashboard' />
      <MenuItem title={intl.formatMessage({id: 'MENU.NBSONLINE'})} to='http://www.northernbalanceonline.com' />
      {
        isAdmin ?
        <MenuInnerWithSub
          title='Learning Center'
          to='/learning-center'
          menuPlacement='bottom-start'
          menuTrigger='click'
        >
          <MenuItem 
            to='/learning-center/employees' 
            title='Employees' 
            hasBullet={true} 
          />
          <MenuItem 
            to='/learning-center/customer' 
            title='Customers' 
            hasBullet={true} 
          />
        </MenuInnerWithSub> :
        <MenuItem to='/learning-center/customer' title='Learning Center' />
      }
    </>
  )
}

'''

'''' Here is the MenuItem.tsx

import React from 'react'
import {Link} from 'react-router-dom'
import {useLocation} from 'react-router'
import clsx from 'clsx'
import {checkIsActive, KTSVG} from '../../../helpers'

type Props = {
  to: string
  title: string
  icon?: string
  fontIcon?: string
  hasArrow?: boolean
  hasBullet?: boolean
}

const MenuItem: React.FC<Props> = ({
  to,
  title,
  icon,
  fontIcon,
  hasArrow = false,
  hasBullet = false,
}) => {
  const {pathname} = useLocation()

  return (
    <div className='menu-item me-lg-1'>
      
      <Link
        className={clsx('menu-link py-3', {
          active: checkIsActive(pathname, to),
        })}
       
        to={to}
      >
        {hasBullet && (
          <span className='menu-bullet'>
            <span className='bullet bullet-dot'></span>
          </span>
        )}

        {icon && (
          <span className='menu-icon'>
            <KTSVG path={icon} className='svg-icon-2' />
          </span>
        )}

        {fontIcon && (
          <span className='menu-icon'>
            <i className={clsx('bi fs-3', fontIcon)}></i>
          </span>
        )}

        <span className='menu-title'>{title}</span>

        {hasArrow && <span className='menu-arrow'></span>}
      </Link>
    </div>
  )
}

export {MenuItem}

''''

How does that `` component look like? Can you post that code? — tromgy, Jan 05 '22 at 02:37
@tromgy I have added the code for in the main topic. I believe the issue is in the Tag. Thinking this must only be used for internal links and not external??? — , Jan 05 '22 at 23:17
Check out this [stackoverflow question](https://stackoverflow.com/questions/46176506/using-navlink-with-external-url). For external links you can just use plain `` element. A `` renders as an `` with `href` equal to `to`, prefixed with `/` — tromgy, Jan 06 '22 at 00:59

Leandro Paz · Answer 1 · 2023-01-17T23:38:38.427

1

Maybe you don't need this anymore but the only way I found is to do something like this:

<MenuItem title={intl.formatMessage({id: 'MENU.NBSONLINE'})} to='' onClick={() => (window.location.href = 'www.northernbalanceonline.com')} />

edited Jan 17 '23 at 23:38

answered Jan 17 '23 at 23:33

Leandro Paz

11
2

This opens the URL in the same tab. How do I open it in a new tab? – Martin Eckleben Jun 29 '23 at 09:36

using the react MenuItem for an external link but it is putting a / in front of the url

1 Answers1