using LINK functionality in the Sidebar.Menu.Item

[dchan14]

is there a way we can use react routers LINK component instead of href?
i like the look of sidbar.menu.item but doing a href call seems to refresh the whole page but if I use link it only replaces the main component which is much nicer.

thanks for your any guidance!

[zksailor534]

I've been trying to keep the dependencies for this component to a minimum, otherwise I probably would have used react-router <Link \>. Instead, the method I recommend is making use of the onClick property to pass something like a react-router push. I've used that on a project I was working and it eliminated the effect you mentioned.

[dchan14]

I tried this
<Sidebar.Menu header="MAIN NAVIGATION" key="3"> <Sidebar.Menu.Item icon={{ className: 'fa-calendar' }} title="Calendar" onClick={browserHistory.push('/scheduled')} /> </Sidebar.Menu>

but i get errors -- Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount.

[dchan14]

again this is an awesome react-adminLTE dashboard!!

just in case any other beginners need it. i imported browserhistory and
onClick={() => browserHistory.push('/scheduled')} the key was this thing () => bc i was getting ReactJS: Warning: setState(…): Cannot update during an existing state transition ...
i am using react router 3 with vulcanjs !!!

[zksailor534]

Glad you could make it work for you.

You are correct, you need to provide a function to events like onClick (or onBlur, etc) instead of a function call. The function call would be activated while rendering the page, causing the error you were seeing. You can either use onClick={() => browserHistory.push('/')} or onClick={function() {browserHistory.push('/')}}.

Closing this issue as solved.