Log React Router <Link/> clicks as actions?

I’m looking for a way to log clicks on <Link/> components (from react-router@2.x.x) as actions. Currently a click throws this error: “Uncaught Invariant Violation: <Link>s rendered outside of a router context cannot navigate.”

Is there a way to do this already? I couldn’t find anything

The links addon is interesting, but a completely unrelated usecase.

[nathancahill]

Here’s the “correct” way to replace React-Router’s history functions with actions. This is in my config.js:

import { addDecorator, action } from '@kadira/storybook'
import { Router } from 'react-router'
import createMemoryHistory from 'history/createMemoryHistory'

const history = createMemoryHistory()

history.push = action('history.push')
history.replace = action('history.replace')
history.go = action('history.go')
history.goBack = action('history.goBack')
history.goForward = action('history.goForward')

addDecorator(story => <Router history={history}>{story()}</Router>)

[arunoda]

I tried this, here’s how to do this:

First create a file called rr.js inside your Storybook config directory (.storybook) with the following content:

import React from 'react';
import { action } from '@kadira/storybook';

// Export the original react-router
module.exports = require('react-router-original');

// Set the custom link component.
module.exports.Link = class Link extends React.Component {
  handleClick(e) {
    e.preventDefault();
    const { to } = this.props;
    action('Link')(to);
  }

  render() {
    const { children, style } = this.props;

    return (
      <a
        style={style}
        href='#'
        onClick={(e) => this.handleClick(e)}
      >
        {children}
      </a>
    );
  }
};

Then create another file called webpack.config.js and add following content:

// load the default config generator.
var genDefaultConfig = require('@kadira/storybook/dist/server/config/defaults/webpack.config.js');

module.exports = function(config, env) {
  // You can use your own config here as well, instead our default config.
  var config = genDefaultConfig(config, env);

  // this is used by our custome `rr.js` module
  config.resolve.alias['react-router-original'] = require.resolve('react-router');
  // this `rr.js` will replace the Link with a our own mock component.
  config.resolve.alias['react-router'] = require.resolve('./rr.js');
  return config;
};