Semantic-ui-react: Menu.Item as={Link} breaks react-router (v4)?

[amsb]

I created a simple navigation example using [email protected], but I get unexpected behavior with how Menu.Item links are handled.

Steps

1. Create element
2. Click on menu item link
   

   Expected Result

React-Router handles rout change without browser reloading at new location.

Actual Result

Browser reloads new location.

Version

0.56.10

Testcase

Fork: http://www.webpackbin.com/EJTZNyGyM

1. Click on link under "As Link", get "Not found".
2. Click on link under "Child Link", see route change w/o reloading.

[amsb]

I created a third alternative "Styled Link" where I explicitly set the className and activeClassName on the react-router Link element like this:

<Link to='/page1' className='item' activeClassName='active'>.

This seems to work. Is it the intended way doing this? Thanks!

[levithomason]

Thank you for the superb report. Your usage is correct, this should not be happening. I've marked this as a bug. We'll get to it as soon as possible.

Note @Semantic-Org/react in fixing this, we ought to upgrade the doc site to react-router 4. Greenkeeper has opened #711 to update all deps. Suggest we update the router there as well. history has a breaking change there anyhow.

[levithomason]

Heads up, the latest react-router version is v3. We won't support v4 since it is in alpha and not stable. Once v4 is published we will assess any issues and ensure full support at that time.

[rchavik]

I would like to use react-router v4 with this.
Using the workaround mentioned by @amsb handler does not work when onClick is specified .
Can you suggest another way so that I can still pass a onClick handler?

[levithomason]

Unfortunately, I do not have a work around. Apologies, once they release a stable version we will ensure compatibility. I would also accept PRs in the meantime. I just personally don't have bandwidth for this and we don't use unstable versions.

[aeldaly]

I'm seeing this same behaviour with react-router v3. I was using rebass before this and links loaded like expected. Started switching my components to semantic-ui and the header now displays the same behaviour in this issue.

my package.json

"firebaseui": "^1.0.0",
    "geolocator": "^2.1.0",
    "lodash": "^4.17.2",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-redux": "^4.4.6",
    "react-router": "^3.0.0",
    "react-router-redux": "^4.0.7",
    "react-uikit-flex": "^2.0.3",
    "redux": "^3.6.0",
    "redux-auth-wrapper": "^0.9.0",
    "redux-persist": "^4.0.0-beta1",
    "redux-thunk": "^2.1.0",
    "semantic-ui-css": "^2.2.4",
    "semantic-ui-react": "^0.63.1"

Thanks for your assistance.

[layershifter]

Our docs use React Router v4, I don't see problems with its usage.

import { Link } from 'react-router-dom'
import { Menu } from 'semantic-ui-react'

<Menu>
  <Menu.Item as={Link} to='/home'>
    Home
  </Menu.Item>
</Menu>

[levithomason]

You must use the new NavLink componen:

import { NavLink } from 'react-router-dom'

See our own doc site sidebar for more:

https://github.com/Semantic-Org/Semantic-UI-React/blob/master/docs/app/Components/Sidebar/Sidebar.js

[davezuko]

@levithomason you are on vacation, get outta here! ;)

[cdaringe]

it took me a sec to figure out what's going on in the Sidebar code.

• in the link provided, the MenuItem component is never used--only Menu.Item
  
  
  
  • MenuItem uses NavLink, but is dead code
  
  
• https://github.com/Semantic-Org/Semantic-UI-React/blob/master/docs/app/Components/Sidebar/Sidebar.js#L119-L126 on the other hand is what to :eyes: at!