Skip to content

Instantly share code, notes, and snippets.

@mjackson

mjackson/SimpleReactRouterUpgrade.js

Created January 30, 2017 22:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mjackson/33f51e9d6b9ea18b467c613fbbcf50e1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mjackson/33f51e9d6b9ea18b467c613fbbcf50e1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mjackson created this gist Jan 30, 2017.
    33 changes: 33 additions & 0 deletions SimpleReactRouterUpgrade.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    // 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! :)