React Router 6 Support

[jeremytenjo]

Issue:

Renders blank when using "react-router-dom": "^6.0.0-alpha.4",

[sgioia9]

would love this

[FTWinston]

With 6.0.0 I get:

A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

[madeleineostoja]

Came across this myself but with React Router 6 this package is no longer needed, you can just use the new MemoryRouter in a decorator:

preview.js

import { MemoryRouter } from 'react-router-dom';

export const decorators = [
  (Story) => (
    <MemoryRouter>
      <Story />
    </MemoryRouter>
  )
];

[FTWinston]

Oh that's simpler than what I came up with. Thanks!

[AndreasBBS]

Just in case someone comes looking to keep the Action trigger on location change I added this Wrapper to mine and is working pretty well:

import React, { useEffect } from 'react'
import { action } from '@storybook/addon-actions'
import { BrowserRouter, useLocation } from 'react-router-dom'

const LocationChangeAction = ({children}) => {
  const location = useLocation()

  useEffect(() => {
    if(location.key !== "default")
      action('React Router Location Change')(location)
  }, [location])

  return <>{children}</>
}

export default function ReactRouterDecorator(Story, context) {
  return (
    <BrowserRouter>
      <LocationChangeAction>
        <Story {...context}/>
      </LocationChangeAction>
    </BrowserRouter>
  )
}

NOTE: It was also working with the MemoryRouter but you get a default action trigger on story render for the path "/", the trigger I'm avoiding with my if condition.

[ColmBhandal]

@AndreasBBS Very cool, thank you! I've added a couple of types and created a Typescript version here.