Active State in React Routes shows in StoryBook

[oracle000]

Is it possible to display an active state of navigation that was build with react router in storybook?

[arunoda]

Could you add more info to this?

[arunoda]

It that about showing the URL navigations in storybook?

[oracle000]

Hi, thank you for your response. What I want to achieve is to shows one of my navigation link that is active. So here is my code for React Router :

header.js

                        <div style={headerStyle.navContainer.navigation}>
                            <RadiumLink   to="/queue" key="1" 
                                    className="nav_item"
                                    style={headerStyle.navContainer.navigation.navItem}
                                    activeStyle={ActiveState}
                                    >
                                    <p>Queue</p>
                            </RadiumLink>                        
                            <RadiumLink   to="/calendar" key="2" 
                                    className="nav_item"
                                    style={headerStyle.navContainer.navigation.navItem}
                                    activeStyle={ActiveState}
                                    >    
                                    <p>Calendar</p>
                            </RadiumLink>                            
                            <RadiumLink   to="/settings" key="3" 
                                    className="nav_item"
                                    style={headerStyle.navContainer.navigation.navItem}
                                    activeStyle={ActiveState}
                                    >
                                    <p>Settings</p>
                            </RadiumLink>                            
                        </div>   

and here is my storybook of that snippets :
**header-storybook.js** 


import React from 'react';
import { storiesOf } from '@kadira/storybook';
import Header from '../header.jsx';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

storiesOf('core.Header', module)
  .addDecorator(story => (
    <MuiThemeProvider>
      {story()}
    </MuiThemeProvider>
  ))

  .add('default view', () => {
      return getProfilePic();
  })

  .add('with active state', () => {

      return getProfilePic();
  });

function getProfilePic() {
    const currentUser = {
        lastName: 'Last Name',
        firstname: 'First Name',      
        getProfilePic: function() {} 
    };
    const selectedTo = '/queue';


    return (
        setActiveState(),
        <Header 
            currentUser = {currentUser}
            activeStyle={selectedTo}            
            >
            <RadiumLink to="/queue" />
        </Header>

    );      
}

function setActiveState() {

}


What is have in my storybook is it only shows the navigation panel, other than that nothing happens. 

[arunoda]

This is not exactly the same, but this is how you can mock the RR with Storybook.
See: #485 (comment)

I think this is the best we can do this from the Storybook end.