React Diagnostic

Fix React Router v6: "A <Route> is only ever to be used as the child of <Routes> element"

React Router v6 removed <Switch> in favor of <Routes>, and replaced the component/render props with the JSX "element" prop.

Invariant failed: A <Route> is only ever to be used as the child of <Routes> element

Quick Fix Checklist

  1. Replace all <Switch> tags with <Routes>
  2. Change <Route path="/home" component={Home} /> to <Route path="/home" element={<Home />} />
  3. Wrap all <Route> definitions directly inside <Routes>