React-styleguidist: How to use Link from react router?

[kulakowka]

I added the <Link> component from react-router-dom to my <Button> component and got an error:

Warning: Failed context type: The context `router` is marked as required in `Link`, 
but its value is `undefined`.

This happens because the UI components do not get the context from <Router>.
Is there any way to fix this?

[sapegin]

This should work: https://github.com/styleguidist/react-styleguidist/blob/master/docs/Cookbook.md#how-to-connect-redux-store

[hmontes]

this code (Obviously the React-router store). Where i put? in .md file associated to my component ? (I have the same issue with Link)

const { Provider } = require('react-redux');
const configureStore = require('../utils/configureStore').default;
const initialState = {
  app: {
    name: 'Pizza Delivery'
  }
};
const store = configureStore({ initialState });
<Provider store={store}>
  <App greeting="Choose your pizza!"/>
</Provider>

[sapegin]

@hmontes Yup, exactly, as any other component example.

If you have any issues, please make a demo project that we can debug based on this repo: https://github.com/styleguidist/example and open a new issue.

[kevinbarabash]

I'm confused. The initial question was about react-router but the proposed solution is for redux. I've tried using react-router inside styleguidist examples b/c the styleguidist server only responds to / instead of /*. Has anyone else run into issues with the server only responding to requests for /?

[rafaesc]

@kevinbarabash I dont think that should integrate react router inside of react-styleguidist, for the reason that maybe it could generate a weird behavior because as much as react-router as react-styleguidis, both use hashs to link pages.

You can use this variable to create a condition process.env.STYLEGUIDIST_ENV and replace the Link component when try to render in react-styleguidist

[cloudratha]

In my case I was able to use the MemoryRouter without affecting Styleguidist. Seems like the Link doesn't change the navigation. Which is perfect for my usecase.

const MemoryRouter = require('react-router').MemoryRouter;
<MemoryRouter>
  <ComponentWithLinks />
</MemoryRouter>

[Fcog]

ok, I solved this using the following:

define a Router wrapper component:

export default class Wrapper extends Component {
    render() {
        return <Router>{this.props.children}</Router>
    }
}

in App.js:

class App extends Component {
  render() {
    return (
        <RouterWrapper>
...
       </RouterWrapper>
    )
  }
}

in styleguide.config.js

const path = require('path')
module.exports = {
    styleguideComponents: {
        Wrapper: path.join(__dirname, './src/RouterWrapper')
    }
}