Skip to content

Releases: remix-run/react-router

[email protected]

08 Sep 22:16
e3d4596
Compare
Choose a tag to compare
[email protected] Pre-release
Pre-release

Patch Changes

  • fix: remove internal router singleton (#9227)

    This change removes the internal module-level routerSingleton we create and maintain inside our data routers since it was causing a number of headaches for non-simple use cases:

    • Unit tests are a pain because you need to find a way to reset the singleton in-between tests
      • Use use a _resetModuleScope singleton for our tests
      • ...but this isn't exposed to users who may want to do their own tests around our router
    • The JSX children <Route> objects cause non-intuitive behavior based on idiomatic react expectations
      • Conditional runtime <Route>'s won't get picked up
      • Adding new <Route>'s during local dev won't get picked up during HMR
      • Using external state in your elements doesn't work as one might expect (see #9225)

    Instead, we are going to lift the singleton out into user-land, so that they create the router singleton and manage it outside the react tree - which is what react 18 is encouraging with useSyncExternalStore anyways! This also means that since users create the router - there's no longer any difference in the rendering aspect for memory/browser/hash routers (which only impacts router/history creation) - so we can get rid of those and trim to a simple RouterProvider

    // Before
    function App() {
      <DataBrowserRouter>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />}>
        </Route>
      <DataBrowserRouter>
    }
    
    // After
    let router = createBrowserRouter([{
      path: "/",
      element: <Layout />,
      children: [{
        index: true,
        element: <Home />,
      }]
    }]);
    
    function App() {
      return <RouterProvider router={router} />
    }

    If folks still prefer the JSX notation, they can leverage createRoutesFromElements (aliased from createRoutesFromChildren since they are not "children" in this usage):

    let routes = createRoutesFromElements(
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />}>
      </Route>
    );
    let router = createBrowserRouter(routes);
    
    function App() {
      return <RouterProvider router={router} />
    }

    And now they can also hook into HMR correctly for router disposal:

    if (import.meta.hot) {
      import.meta.hot.dispose(() => router.dispose());
    }
    

    And finally since <RouterProvider> accepts a router, it makes unit testing easer since you can create a fresh router with each test.

    Removed APIs

    • <DataMemoryRouter>
    • <DataBrowserRouter>
    • <DataHashRouter>
    • <DataRouterProvider>
    • <DataRouter>

    Modified APIs

    • createMemoryRouter/createBrowserRouter/createHashRouter used to live in @remix-run/router to prevent devs from needing to create their own history. These are now moved to react-router/react-router-dom and handle the RouteObject -> AgnosticRouteObject conversion.

    Added APIs

    • <RouterProvider>
    • createRoutesFromElements (alias of createRoutesFromChildren)
  • Updated dependencies

[email protected]

08 Sep 22:16
e3d4596
Compare
Choose a tag to compare
[email protected] Pre-release
Pre-release

Patch Changes

[email protected]

31 Aug 20:55
c9b343b
Compare
Choose a tag to compare
[email protected] Pre-release
Pre-release

Patch Changes

[email protected]

02 Aug 14:18
12f3bd3
Compare
Choose a tag to compare
[email protected] Pre-release
Pre-release

Patch Changes

  • c3406eb: fix: Rename <Deferred> to <Await> (#9095)

    • We are no longer replacing the Promise on loaderData with the value/error
      when it settles so it's now always a Promise.
    • To that end, we changed from <Deferred value={promise}> to
      <Await resolve={promise}> for clarity, and it also now supports using
      <Await> with raw promises from anywhere, not only those on loaderData
      from a defer() call.
      • Note that raw promises will not be automatically cancelled on interruptions
        so they are not recommended
    • The hooks are now useAsyncValue/useAsyncError
  • Updated dependencies

[email protected]

02 Aug 14:18
12f3bd3
Compare
Choose a tag to compare
[email protected] Pre-release
Pre-release

Patch Changes

[email protected]

02 Aug 14:18
12f3bd3
Compare
Choose a tag to compare
[email protected] Pre-release
Pre-release

Patch Changes

[email protected]

02 Aug 14:18
12f3bd3
Compare
Choose a tag to compare
[email protected] Pre-release
Pre-release

Patch Changes

@remix-run/[email protected]

02 Aug 14:18
12f3bd3
Compare
Choose a tag to compare
Pre-release

Patch Changes

  • c3406eb: fix: Rename <Deferred> to <Await> (#9095)

    • We are no longer replacing the Promise on loaderData with the value/error
      when it settles so it's now always a Promise.
    • To that end, we changed from <Deferred value={promise}> to
      <Await resolve={promise}> for clarity, and it also now supports using
      <Await> with raw promises from anywhere, not only those on loaderData
      from a defer() call.
      • Note that raw promises will not be automatically cancelled on interruptions
        so they are not recommended
    • The hooks are now useAsyncValue/useAsyncError

[email protected]

22 Jul 15:52
eb39f7d
Compare
Choose a tag to compare
[email protected] Pre-release
Pre-release

Patch Changes

  • feat: Deferred API Updates (#9070)

    • Removes <Suspense> from inside <Deferred>, requires users to render their own suspense boundaries
    • Updates Deferred to use a true error boundary to catch render errors as well as data errors
    • Support array and single promise usages
      • return deferred([ await critical(), lazy() ])
      • return deferred(lazy())
    • Remove Deferrable/ResolvedDeferrable in favor of raw Promise's and Awaited
    • Remove generics from useDeferredData until useLoaderData generic is decided in 6.5
  • Updated dependencies

[email protected]

22 Jul 15:52
eb39f7d
Compare
Choose a tag to compare
[email protected] Pre-release
Pre-release

Patch Changes