Skip to content

Instantly share code, notes, and snippets.

@fjordan
Forked from shelldandy/App.js
Created November 12, 2017 20:56
Show Gist options
  • Save fjordan/75379051c89f5bf534effd623da835e6 to your computer and use it in GitHub Desktop.
Save fjordan/75379051c89f5bf534effd623da835e6 to your computer and use it in GitHub Desktop.
nprogress with react-router in create-react-app
import React from 'react'
import { BrowserRouter as Router, Switch } from 'react-router-dom'
import routes from './routes'
import FancyRoute from './components/tools/FancyRoute'
const App = props =>
<Router>
<Switch>
{routes.map((route, i) =>
<FancyRoute key={i} {...route} />
)}
</Switch>
</Router>
export default App
import React from 'react'
import { Route } from 'react-router-dom'
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'
import './FancyRoute.css'
class FancyRoute extends React.Component {
componentWillMount () {
nprogress.start()
}
componentDidMount () {
nprogress.done()
}
render () {
return (
<Route {...this.props} />
)
}
}
export default FancyRoute
$progress-color: #bada55;
#nprogress .bar {
background: $progress-color;
}
#nprogress .peg {
box-shadow: 0 0 10px $progress-color, 0 0 5px $progress-color;
}
#nprogress .spinner-icon {
border-top-color: $progress-color;
border-left-color: $progress-color;
}
import Home from './views/Home'
import About from './views/About'
import Blog from './views/Blog'
const routes = [
{
title: 'Home',
path: '/',
exact: true,
component: Home
},
{
title: 'Blog',
path: '/blog',
component: Blog
},
{
title: 'About',
path: '/about',
component: About
}
]
export default routes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment