pbeshai / use-query-params

React Hook for managing state in URL query parameters with easy serialization.
https://pbeshai.github.io/use-query-params
ISC License
2.15k stars 96 forks source link

Error when upgrading `react-router-dom` to version 6: "A <Route> is only ever to be used as the child of <Routes>" #195

Closed Avivhdr closed 2 years ago

Avivhdr commented 2 years ago

Hi 👋🏼

https://codesandbox.io/s/react-router-basic-forked-m6w00?file=/example.js

In the above Codesandbox, there is a simple react-router (v6) example wrapped with <QueryParamProvider />. Code:

<QueryParamProvider ReactRouterRoute={Route}>
  <Routes>
    <Route exact path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
    <Route path="/dashboard" element={<Dashboard />} />
  </Routes>
</QueryParamProvider>

The code results in the following Error:

Error
A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. 
Please wrap your <Route> in a <Routes>.

When commenting out the QueryParamProvider wrapper, the app renders.

use-query-params - v1.2.3 react-router-dom - v6.0.2

pbeshai commented 2 years ago

Please follow these instructions for now https://github.com/pbeshai/use-query-params/issues/108#issuecomment-785209454

Avivhdr commented 2 years ago

Thank you! I close this ticket.