alpertuna / react-metismenu

A ready / simple to use, highly customizable, updateable, ajax supported, animated and material designed menu component for React

Home Page:https://www.npmjs.com/package/react-metismenu

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

hashHistory doesn't seem to work

opened this issue · comments

https://alpertuna.github.io/react-metismenu-router-link/#/menu-2

Example is not working.
Problem is in 'react-metismenu-router-link' when combined with hashHistory.
Because hashHistory is not in "react-router" module anymore.

Using BrowserRouter instead.

Modified example:

import React from 'react';
import { render } from 'react-dom';
import { Router, Route } from 'react-router';
import MetisMenu from 'react-metismenu';
import RouterLink from 'react-metismenu-router-link';
import { BrowserRouter } from 'react-router-dom'

const Menu1 = () => <div><u>Menu 1 View</u></div>;
const Menu2 = () => <div><i>Menu 2 View</i></div>;
const SubMenu = () => <div><s>SubMenu View</s></div>;

const menu = [
  {
    icon: 'dashboard',
    label: 'Menu 1',
    to: 'menu-1',
  },
  {
    icon: 'bell',
    label: 'Menu 2',
    to: 'menu-2',
  },
  {
    icon: 'bolt',
    label: 'Menu 3',
    content: [
      {
        icon: 'bolt',
        label: 'Sub Menu',
        to: 'sub-menu',
      },
    ],
  },
  {
    icon: 'external-link',
    label: 'External Link',
    externalLink: true,
    to: 'https://www.google.com',
  },
];

const App = (props) => (
  <div>
    <MetisMenu
      content={menu}
      LinkComponent={RouterLink}
    />
    <h2>Page Content</h2>
    {props.children || "Greeter Page"}
  </div>
);

render(
  <BrowserRouter>
    <Route path="/" component={App}>
      <Route path="menu-1" component={Menu1} />
      <Route path="menu-2" component={Menu2} />
      <Route path="sub-menu" component={SubMenu} />
    </Route>
  </BrowserRouter>,
  document.getElementById('root')
);

But then we get "TypeError: this.context.router.isActive is not a function".

Am I missing something?

Hi @MJ6174,
Thank you for your report. It looks an update is needed for react-router. I will look into it asap.

Hi,
I have migrated react-router to v4 and published a major version of react-metismenu-router-link (2.0.0).
If problem stills, you can reopen the issue 😊