diff --git a/config.js b/config.js
index aaa3583ed7..f5b81ddd85 100644
--- a/config.js
+++ b/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__,
diff --git a/docs/.eslintrc b/docs/.eslintrc
index 898e121242..8af532ecd5 100644
--- a/docs/.eslintrc
+++ b/docs/.eslintrc
@@ -1,6 +1,5 @@
{
"globals": {
- "__BASE__": false,
"__DEV__": false,
"__DEBUG__": false,
"__STAGING__": false,
diff --git a/docs/app/App.js b/docs/app/App.js
deleted file mode 100644
index 834506f1a0..0000000000
--- a/docs/app/App.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React, { Component } from 'react'
-import { Router, useRouterHistory } from 'react-router'
-import { createHistory } from 'history'
-
-import routes from './routes'
-
-const history = useRouterHistory(createHistory)({
- basename: __BASE__,
-})
-
-export default class App extends Component {
- render() {
- return (
-
- )
- }
-}
diff --git a/docs/app/Components/ComponentDoc/ComponentDoc.js b/docs/app/Components/ComponentDoc/ComponentDoc.js
index 56e045dc24..0201043867 100644
--- a/docs/app/Components/ComponentDoc/ComponentDoc.js
+++ b/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'
diff --git a/docs/app/Components/Layout.js b/docs/app/Components/Layout.js
index dd135c2310..839fe2b016 100644
--- a/docs/app/Components/Layout.js
+++ b/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)
}
diff --git a/docs/app/Components/Logo/Logo.js b/docs/app/Components/Logo/Logo.js
index c07ac6144a..b9ff73f244 100644
--- a/docs/app/Components/Logo/Logo.js
+++ b/docs/app/Components/Logo/Logo.js
@@ -2,7 +2,7 @@ import React from 'react'
import { Image } from 'src'
-const Logo = (props) =>
+const Logo = (props) =>
Logo.propTypes = Image.propTypes
diff --git a/docs/app/Components/Root.js b/docs/app/Components/Root.js
index 6222a89efa..87781608a5 100644
--- a/docs/app/Components/Root.js
+++ b/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)) {
diff --git a/docs/app/Components/Sidebar/Sidebar.js b/docs/app/Components/Sidebar/Sidebar.js
index 5517437a9b..16a02f1781 100644
--- a/docs/app/Components/Sidebar/Sidebar.js
+++ b/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 }) => (
-
+
{children || meta.name}
-
+
)
MenuItem.propTypes = {
activeClassName: PropTypes.string,
@@ -33,11 +34,11 @@ MenuItem.defaultProps = {
}
const selectedItemLabel = Press Enter
-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 {
Getting Started
-
+
Introduction
-
+
Usage
@@ -217,3 +218,5 @@ export default class Sidebar extends Component {
)
}
}
+
+export default withRouter(Sidebar)
diff --git a/docs/app/Components/TAAttribution/TAAttribution.js b/docs/app/Components/TAAttribution/TAAttribution.js
index f39ce662a3..8f53d393e8 100644
--- a/docs/app/Components/TAAttribution/TAAttribution.js
+++ b/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'
/>
)
diff --git a/docs/app/Views/Introduction.js b/docs/app/Views/Introduction.js
index 4ffb2ed971..0723a7abcb 100644
--- a/docs/app/Views/Introduction.js
+++ b/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 = `
const HeaderAugmentationHTML = ``
-const MenuItemLinkAugmentationJSX = `import { Link } from 'react-router'
+const MenuItemLinkAugmentationJSX = `import { Link } from 'react-router-dom'
diff --git a/docs/app/index.ejs b/docs/app/index.ejs
index 4087e4eda9..25169289b2 100644
--- a/docs/app/index.ejs
+++ b/docs/app/index.ejs
@@ -2,7 +2,7 @@
- />
+
Semantic UI React
diff --git a/docs/app/index.js b/docs/app/index.js
index 034d5e2332..11364ca297 100644
--- a/docs/app/index.js
+++ b/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( , 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)
diff --git a/docs/app/routes.js b/docs/app/routes.js
index 9e471b1b0c..0887c99cdf 100644
--- a/docs/app/routes.js
+++ b/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 = (
-
-
+const RedirectToIntro = () =>
-
-
-
-
-
+const Router = () => (
+
+
+
+
+
+
+
+
+
)
-export default routes
+export default Router
diff --git a/package.json b/package.json
index 3ee94200c2..d6e1d4956c 100644
--- a/package.json
+++ b/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",