Skip to content

Instantly share code, notes, and snippets.

@mjackson
Created January 30, 2017 22:39
Show Gist options
  • Star 21 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save mjackson/33f51e9d6b9ea18b467c613fbbcf50e1 to your computer and use it in GitHub Desktop.
Save mjackson/33f51e9d6b9ea18b467c613fbbcf50e1 to your computer and use it in GitHub Desktop.
// In v2/3 you did this:
import ReactDOM from 'react-dom'
import { Router, browserHistory, Route } from 'react-router'
ReactDOM.render(
<Router>
<Route path="/about" component={About}/>
<Route path="/:username" component={User}/>
</Router>
)
// Those <Route> components above were fake components. They didn't
// really render anything. Instead, we just stripped their props and
// used them as config for the router. In v4, this has changed.
// In v4, your <Route> components actually render to the page! We split
// out the logic that decides which one to render into the <Switch>
// component. Also, we now provide a <BrowserRouter> component you can
// use to configure history management declaratively.
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
ReactDOM.render(
<Router>
<Switch>
<Route path="/about" component={About}/>
<Route path="/:username" component={User}/>
</Switch>
</Router>
)
// There's LOTS more to know (and a lot more advantages to doing things
// this way) but that should get you started! :)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment