How do I migrate from React Router v5 to v6?

How do I migrate from React Router v5 to v6?

To migrate from React Router v5 to v6, you'll need to update your routes and components. The main changes include using the new <Routes> component instead of <Switch>, and updating the way you define routes.

What are the key differences between v5 and v6?

Key differences include the introduction of nested routes, the removal of the component prop in favor of element, and improved route matching.

Can you give me an example of how to set up routes in v6?

Sure! Here's a simple example:

import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path='/' element={<Home />} />
      <Route path='/about' element={<About />} />
    </Routes>
  );
}

Are there any breaking changes I should be aware of?

Yes, some breaking changes include the removal of the withRouter HOC and changes to how hooks like useHistory work. It's important to review the migration guide for a complete list.