Update react-router to version 4.0.0 🚀

config.js

@@ -8,7 +8,6 @@ const __DEV__ = env === 'development'
 const __STAGING__ = env === 'staging'
 const __TEST__ = env === 'test'
 const __PROD__ = env === 'production'
-const __BASE__ = '/'
 
 let config = {
   env,
@@ -63,7 +62,7 @@ config = Object.assign({}, config, {
   compiler_lint: argv.lint !== false,
   compiler_quiet: false,
   compiler_output_path: paths.base(config.dir_docs_dist),
-  compiler_public_path: __PROD__ ? '//cdn.rawgit.com/Semantic-Org/Semantic-UI-React/gh-pages/' : __BASE__,
+  compiler_public_path: __PROD__ ? '//cdn.rawgit.com/Semantic-Org/Semantic-UI-React/gh-pages/' : '/',
   compiler_vendor: [
     'babel-standalone',
     'brace',
@@ -102,7 +101,6 @@ config = Object.assign({}, config, {
         NODE_ENV: JSON.stringify(env),
       },
     },
-    __BASE__: JSON.stringify(__BASE__),
     __DEV__,
     __DEBUG__: !!argv.debug,
     __STAGING__,

docs/.eslintrc

@@ -1,6 +1,5 @@
 {
   "globals": {
-    "__BASE__": false,
     "__DEV__": false,
     "__DEBUG__": false,
     "__STAGING__": false,

docs/app/Components/ComponentDoc/ComponentDoc.js

@@ -2,7 +2,7 @@ import cx from 'classnames'
 import _ from 'lodash'
 import React, { Component, PropTypes } from 'react'
 import DocumentTitle from 'react-document-title'
-import { Link } from 'react-router'
+import { Link } from 'react-router-dom'
 
 import ComponentExamples from './ComponentExamples'
 import ComponentProps from './ComponentProps'

docs/app/Components/Layout.js

@@ -32,10 +32,9 @@ export default class Layout extends Component {
 
     scrollTo(0, 0)
 
-    anchors
-      .add('h2, h3, h4, h5, h6')
-      .remove([1, 2, 3, 4, 5, 6].map(n => `.rendered-example h${n}`).join(', '))
-      .remove('.no-anchor')
+    anchors.add('h2, h3, h4, h5, h6')
+    anchors.remove([1, 2, 3, 4, 5, 6].map(n => `.rendered-example h${n}`).join(', '))
+    anchors.remove('.no-anchor')
 
     this.scrollStartTimeout = setTimeout(this.scrollToAnchor, 500)
   }

docs/app/Components/Logo/Logo.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { Image } from 'src'
 
-const Logo = (props) => <Image {...props} src={__BASE__ + 'logo.png'} />
+const Logo = (props) => <Image {...props} src='/logo.png' />
 
 Logo.propTypes = Image.propTypes
 

docs/app/Components/Root.js

@@ -10,13 +10,15 @@ import * as semanticUIReact from 'src'
 export default class Root extends Component {
   static propTypes = {
     children: PropTypes.node,
-    params: PropTypes.shape({
-      name: PropTypes.string.isRequired,
+    match: PropTypes.shape({
+      params: PropTypes.shape({
+        name: PropTypes.string.isRequired,
+      }),
     }),
   }
 
   render() {
-    const { name } = this.props.params
+    const { name } = this.props.match.params
     const componentName = _.startCase(name).replace(/ /g, '')
     const component = semanticUIReact[componentName]
     if (!component || !component._meta || !META.isParent(component)) {

docs/app/Components/Sidebar/Sidebar.js

@@ -1,7 +1,8 @@
 import _ from 'lodash/fp'
 import React, { Component, PropTypes } from 'react'
 import { findDOMNode } from 'react-dom'
-import { Link, routerShape } from 'react-router'
+import { NavLink } from 'react-router-dom'
+import { withRouter } from 'react-router'
 
 import pkg from 'package.json'
 import { typeOrder, parentComponents, repoURL } from 'docs/app/utils'
@@ -16,9 +17,9 @@ import {
 const getRoute = (_meta) => `/${_meta.type}s/${_.kebabCase(_meta.name)}`
 
 const MenuItem = ({ meta, children, ...rest }) => (
-  <Link to={getRoute(meta)} {...rest}>
+  <NavLink to={getRoute(meta)} {...rest}>
     {children || meta.name}
-  </Link>
+  </NavLink>
 )
 MenuItem.propTypes = {
   activeClassName: PropTypes.string,
@@ -33,11 +34,11 @@ MenuItem.defaultProps = {
 }
 const selectedItemLabel = <span style={{ color: '#35bdb2', float: 'right' }}>Press Enter</span>
 
-export default class Sidebar extends Component {
-  static contextTypes = {
-    router: routerShape,
-  }
+class Sidebar extends Component {
   static propTypes = {
+    match: PropTypes.object.isRequired,
+    location: PropTypes.object.isRequired,
+    history: PropTypes.object.isRequired,
     style: PropTypes.object,
   }
   state = { query: '' }
@@ -82,13 +83,13 @@ export default class Sidebar extends Component {
   })
 
   handleSearchKeyDown = e => {
-    const { router } = this.context
+    const { history } = this.props
     const { selectedItemIndex } = this.state
     const code = keyboardKey.getCode(e)
 
     if (code === keyboardKey.Enter && this.selectedRoute) {
       e.preventDefault()
-      router.push(this.selectedRoute)
+      history.push(this.selectedRoute)
       this.selectedRoute = null
       this._searchInput.blur()
       this.setState({ query: '' })
@@ -117,7 +118,7 @@ export default class Sidebar extends Component {
           key={_meta.name}
           name={_meta.name}
           onClick={this.handleItemClick}
-          as={Link}
+          as={NavLink}
           to={getRoute(_meta)}
           activeClassName='active'
         />
@@ -161,7 +162,7 @@ export default class Sidebar extends Component {
           name={_meta.name}
           onClick={this.handleItemClick}
           active={isSelected}
-          as={Link}
+          as={NavLink}
           to={getRoute(_meta)}
         >
           {_meta.name}
@@ -188,10 +189,10 @@ export default class Sidebar extends Component {
         <Menu.Item>
           <Menu.Header>Getting Started</Menu.Header>
           <Menu.Menu>
-            <Menu.Item as={Link} to='/introduction' activeClassName='active'>
+            <Menu.Item as={NavLink} to='/introduction' activeClassName='active'>
               Introduction
             </Menu.Item>
-            <Menu.Item as={Link} to='/usage' activeClassName='active'>
+            <Menu.Item as={NavLink} to='/usage' activeClassName='active'>
               Usage
             </Menu.Item>
             <Menu.Item as='a' href={repoURL}>
@@ -217,3 +218,5 @@ export default class Sidebar extends Component {
     )
   }
 }
+
+export default withRouter(Sidebar)

docs/app/Components/TAAttribution/TAAttribution.js

@@ -68,7 +68,7 @@ class TAAttribution extends Component {
           inline
           verticalAlign='middle'
           style={imageStyle}
-          src={`${__BASE__}assets/technologyadvice-logo-dark.png`}
+          src='/assets/technologyadvice-logo-dark.png'
         />
       </a>
     )

docs/app/Views/Introduction.js

@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react'
-import { Link } from 'react-router'
+import { Link } from 'react-router-dom'
 import Editor from 'docs/app/Components/Editor/Editor'
 import pkg from 'package.json'
 import {
@@ -100,7 +100,7 @@ const HeaderAugmentationJSX = `<Header as='h3'>
 const HeaderAugmentationHTML = `<h3 class="ui header">
   Learn More
 </h3>`
-const MenuItemLinkAugmentationJSX = `import { Link } from 'react-router'
+const MenuItemLinkAugmentationJSX = `import { Link } from 'react-router-dom'
 
 <Menu>
   <Menu.Item as={Link} to='/home'>

docs/app/index.ejs

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <link rel="shortcut icon" type="image/x-icon" href=<%= __BASE__ + 'logo.png' %> />
+  <link rel="shortcut icon" type="image/x-icon" href='/logo.png' />
   <link rel="stylesheet"
         href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/<%= htmlWebpackPlugin.options.versions.sui %>/semantic.min.css">
   <title>Semantic UI React</title>

docs/app/index.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import App from './App'
+import Router from './routes'
 
 // ----------------------------------------
 // Rendering
@@ -18,13 +18,13 @@ const render = (NewApp) => ReactDOM.render(<NewApp />, mountNode)
 if (__DEV__) {
   // When the application source code changes, re-render the whole thing.
   if (module.hot) {
-    module.hot.accept('./App', () => {
+    module.hot.accept('./routes', () => {
       // restore scroll
       const { scrollLeft, scrollTop } = document.scrollingElement
       ReactDOM.unmountComponentAtNode(mountNode)
 
       try {
-        render(require('./App').default)
+        render(require('./routes').default)
         document.scrollingElement.scrollTop = scrollTop
         document.scrollingElement.scrollLeft = scrollLeft
       } catch (e) {
@@ -38,4 +38,4 @@ if (__DEV__) {
 // Start the app
 // ----------------------------------------
 
-render(App)
+render(Router)

docs/app/routes.js

@@ -1,21 +1,27 @@
 import React from 'react'
-import { Route, IndexRedirect } from 'react-router'
-
+import {
+  BrowserRouter,
+  Route,
+  Redirect,
+} from 'react-router-dom'
 import Root from './Components/Root'
 import Layout from './Components/Layout'
 import Introduction from './Views/Introduction'
 import Usage from './Views/Usage'
 import PageNotFound from './Views/PageNotFound'
 
-const routes = (
-  <Route path='/' component={Layout}>
-    <IndexRedirect to='introduction' />
+const RedirectToIntro = () => <Redirect to='introduction' />
 
-    <Route path='introduction' component={Introduction} />
-    <Route path='usage' component={Usage} />
-    <Route path=':type/:name' component={Root} />
-    <Route path='*' component={PageNotFound} />
-  </Route>
+const Router = () => (
+  <BrowserRouter>
+    <Layout>
+      <Route path='/' render={RedirectToIntro} />
+      <Route path='/introduction' component={Introduction} />
+      <Route path='/usage' component={Usage} />
+      <Route path='/:type/:name' component={Root} />
+      <Route path='/*' component={PageNotFound} />
+    </Layout>
+  </BrowserRouter>
 )
 
-export default routes
+export default Router

package.json

@@ -120,7 +120,8 @@
     "react-docgen": "^2.13.0",
     "react-document-title": "^2.0.2",
     "react-dom": "15.4.2",
-    "react-router": "^3.0.2",
+    "react-router": "^4.0.0",
+    "react-router-dom": "^4.0.0",
     "require-dir": "^0.3.0",
     "rimraf": "^2.5.2",
     "sass-loader": "^4.0.2",