migrate.jsx

// Step 1 - update component code

// before
const Thing = props => {
  const { id } = props.match.params
  const { location, history } = props 
  return <div/>
}


// after (works for withRouter'd components too)
const Thing = () => {
  const { id } = useParams()
  const location = useLocation()
  // deprecated for useNavigate() but still works
  const history = useHistory()

  return <div/>
}

// SHIP IT, go home, it will work


// Step 2 - Update route config

// before
<Switch>
  <Route path="/thing/:id" component={Thing}/>
  <Route path="/not-migrated/and-its-fine" component={Whatever} />
</Switch>

// after
<Switch>
  <Route path="/thing/:id">
    {/* now you can nest routes or simply pass props to Thing */}
    <Thing/>
  </Route>
  <Route path="/not-migrated/and-its-fine" component={Whatever} />
</Switch>

// SHIP IT!


// Step 3 - repeat for all routes in the switch, SHIP IT!


// Step 4 - Switch Switch to Router, now you get some new features

// - algorithm based matching
// - route validation
// - location state matching
// - relative links
// - relative navigate
// - nested routes
<Switch>
  <Route exact/>
  <Route exact/>
</Switch>

<Router>
  <Route/>
  <Route/>
</Router>

// SHIP IT!

// Step 5, change history.push/replace to navigate,
// inside of <Router> `useHistory` will actually give a duck typed history
// that warns when using push/replace, with copy/paste `navigate` replacement
// and throws an error on history.listen that says to use `useLocation`

// Step 6, if you want, now you can move the nested Routers
// up to their parent router, or not, doesn't matter

// before: parent router
<Router>
  <Route path="invoices" />
</Router>

// after: parent router
<Router>
  <Route path="invoices">
    {/* paste sub-routes here */}
  </Route>
</Router>

// before: sub router
<Router>
  {/* routes would be here */}
</Router>

// after: sub router
<Outlet/>


// Floating Routes

// before
function Thing() {
  return (
    <div>
      <Route path="/somewhere" render={() => {
        return <Stuff/>
      }}/>
    </div>
  )
}

// after
function Thing() {
  const match = useMatch('/somewhere')
  return (
    <div>
      {match && <Stuff />}
    </div>
  )
}