react-metismenu-router-link

react-metismenu-router-link is a React component that allows you to use React Router's <Link /> with metismenu's onClick handler. This component is useful when you want to use React Router's client-side routing with your metismenu navigation.

Installation

npm install react-metismenu-router-link --save

Usage

To use react-metismenu-router-link, first import it into your component.

import React from 'react';
import { Router, Route, Switch } from "react-router-dom";
import { Link } from "react-router-dom";
import { MetisMenu, MetisMenuContent, MetisMenuLink } from "react-metismenu";
import { ReactMetismenuRouterLink } from "react-metismenu-router-link";

Then, use ReactMetismenuRouterLink instead of MetisMenuLink in your MetisMenu component.

const navigation = [
    {
        label: "Home",
        to: "/",
        icon: "fa fa-home",
        onClick: closeMenu
    },
    {
        label: "About",
        to: "/about/",
        icon: "fa fa-info",
        onClick: closeMenu
    },
    {
        label: "Contact",
        to: "/contact/",
        icon: "fa fa-envelope",
        onClick: closeMenu
    }
];

const App = () => {
    const closeMenu = () => {
        // Close the MetisMenu
    };

    return (
        <Router>
            <MetisMenuContent>
                <MetisMenu>
                    {navigation.map((item, index) => {
                        return (
                            <ReactMetismenuRouterLink
                                key={index}
                                to={item.to}
                                icon={item.icon}
                            >
                                {item.label}
                            </ReactMetismenuRouterLink>
                        );
                    })}
                </MetisMenu>
            </MetisMenuContent>
            <Switch>
                <Route path="/about">
                    <h1>About Page</h1>
                </Route>
                <Route path="/contact">
                    <h1>Contact Page</h1>
                </Route>
                <Route path="/">
                    <h1>Home Page</h1>
                </Route>
            </Switch>
        </Router>
    );
};

export default App;

ReactMetismenuRouterLink will use Link under the hood and add onClick to close the metismenu.

Conclusion

react-metismenu-router-link makes it easy to integrate React Router with metismenu. With this component, you can use the benefits of client-side routing with your metismenu navigation.