ReactRouter is BROKEN!!

broken-route-switch.jsx

import React from 'react'
import styled from 'styled-components'
import {
  Switch,
  Route,
  Redirect
} from 'react-router-dom'
import RepoListPage from './pages/repos/list/ReposListPage'
import ReposNewPage from './pages/repos/new/ReposNewPage'
import PreferencesPage from './pages/preferences/PreferencesPage.js'

const Root = styled.div`
  flex: 1;
  position: relative;
  z-index: 1;
`

class PageView extends React.PureComponent {
  render () {
    return <Root>
      <Switch location={this.props.location}>
        <Route path='/' exact component={RepoListPage} />
        <Route path='/new' exact component={ReposNewPage} />
        <Redirect path='/r' to='/' exact />
        <Route path='/r/:repoName' component={ReposNewPage} />
        <Route path='/preferences' component={PreferencesPage} />
      </Switch>
    </Root>
  }
}

export default PageView

fixed-route-switch.jsx

import React from 'react'
import styled from 'styled-components'
import {
  withRouter
} from 'react-router-dom'
import RepoListPage from './pages/repos/list/ReposListPage'
import ReposNewPage from './pages/repos/new/ReposNewPage'
import PreferencesPage from './pages/preferences/PreferencesPage.js'

const Root = styled.div`
  flex: 1;
  position: relative;
  z-index: 1;
`

class PageView extends React.PureComponent {
  constructor (props) {
    super(props)

    this.state = {
      location: {
        ...props.location
      }
    }
  }
  componentDidMount () {
    this.unlisten = this.props.history.listen(this.historyChange)

    // Trigger redirect from here
    const { location } = this.state
    if (location.pathname === '/r') {
      this.props.history.replace('/')
    }
  }

  componentWillUnmount () {
    this.unlisten()
  }

  historyChange = (location) => {
    this.setState({
      location: {
        ...location
      }
    })
  }

  renderRouteComponent () {
    const { location } = this.state
    if (location.pathname === '/') return <RepoListPage />
    if (location.pathname === '/new') return <ReposNewPage />
    if (location.pathname === '/preferences') return <PreferencesPage />
    // Redirect page show nothing.
    if (location.pathname === '/r') return null
    if (location.pathname.test(/^\/r\/.+/)) return <ReposNewPage />
  }

  render () {
    return <Root>
      {this.renderRouteComponent()}
    </Root>
  }
}

export default withRouter(PageView)