Skip to content

Instantly share code, notes, and snippets.

@Rokt33r
Last active June 12, 2017 14:45
Show Gist options
  • Save Rokt33r/4a6acc78afc1d6cb378fa7ca196d8867 to your computer and use it in GitHub Desktop.
Save Rokt33r/4a6acc78afc1d6cb378fa7ca196d8867 to your computer and use it in GitHub Desktop.
ReactRouter is BROKEN!!
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
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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment