Issue with UISrefActive and hashLocationPlugin?

[consultwithmike]

Issue

For some reason the UISrefActive components never render active as a class for the UISref components. Does this have something to do with the hashLocationPlugin? Or did I set something up wrong?

Setup

Imports

import {UIRouter, UIView, UISref, UISrefActive, hashLocationPlugin} from 'ui-router-react'

Definitions

// define your states
const states = [
    {
        name: 'login',
        url: '/login',
        component: LoginContainer
    }, {
        name: 'home',
        url: '/',
        component: DashboardContainer,
        resolve: [currentUserDep],
        redirectTo: redirectFn
    }, {
        name: 'tests',
        url: '/tests',
        component: TestsContainer,
        resolve: [currentUserDep],
        redirectTo: redirectFn
    }, {
        name: 'client',
        url: '/client/{clientId:int}',
        component: ClientContainer,
        resolve: [currentUserDep],
        redirectTo: redirectFn
    }
];

// select your plugins
const plugins = [hashLocationPlugin];

const configRouter = router => {
    router.urlRouter.otherwise("/");
};

UIRouter Component

<UIRouter plugins={plugins} states={states} config={configRouter}>

Bootrstrap nav

<nav className="navbar navbar-default">
    ...
    <div className="collapse navbar-collapse" id="navbar-collapse-1">
        <ul className="nav navbar-nav">
            <li>
                <UISrefActive class={'active'}>
                    <UISref to="home">
                        <a>
                            <span className="glyphicon glyphicon-dashboard" aria-hidden="true"></span> Dashboard
                        </a>
                    </UISref>
                </UISrefActive>
            </li>
            <li>
                <UISrefActive class={'active'}>
                    <UISref to="tests">
                        <a>
                            <span className="glyphicon glyphicon-education" aria-hidden="true"></span> Tests
                        </a>
                    </UISref>
                </UISrefActive>
            </li>
        </ul>
        <div className="navbar-right">
            <ImpersonationContainer/>
        </div>
    </div>
    ...
</nav>

[elboman]

Hi,
code looks fine, I'll take a look at the hashLocationPlugin to see if that's causing the problem.
Can you reproduce the error in a jsbin/plunker? Because it may be related to other things, so we should narrow down the variables.

[mfreeman-xtivia]

Is this still an issue? I think I am seeing the same behavior using the hashLocationPlugin

[consultwithmike]

@mfreeman-xtivia yep I'm still seeing this issue, but I can't get the jsbin/plunker to work for me. They just never did work right with React being pulled in and stuff. Clearly I'm doing something wrong there.

[jrynlds]

I work with @consultwithmike
I put together this plunker from another example on the ui-router-react, but switched out to use 'hashLocationPlugin' ... problem is that this example (plunker) is working... but my/our code is still not

plunker with hashLocationPlugin

[jrynlds]

@consultwithmike @mfreeman-xtivia @elboman
here's a better plunker, closer to what Mike posted... but again... it is working fine, but I'm not able to figure out why it is not working in my code.
plunker closer to what was originally posted

[jrynlds]

I was using 0.4.0 ... but I just upgraded to 0.5.0 to see where that would get me.

Still not working, but now it is throwing this error:

Failed prop type: The prop class is marked as required in UISrefActive, but its value is undefined.

which is strange, as my code is such:

<div className="sub" id={"menu_" + UrlName}>
	<UISrefActive class={'active'}>
		<UISref to={UrlName}>
			<a>{Name}</a>
		</UISref>
	</UISrefActive>
</div>				

I tried it both with {} and without; class='active' and class={'active'}

[consultwithmike]

@johnrgit @mfreeman-xtivia @elboman

I found the culprit. I was using the https://github.com/insin/babel-plugin-react-html-attrs plugin for the JSX transform in Webpack and that was changing class to className during build.

Won't be using that plugin again!