v6.4.2

What's Changed

• Respect basename in useFormAction (#9352)
• Fix IndexRouteObject and NonIndexRouteObject types to make hasErrorElement optional (#9394)
• Enhance console error messages for invalid usage of data router hooks (#9311)
• If an index route has children, it will result in a runtime error. We have strengthened our RouteObject/RouteProps types to surface the error in TypeScript. (#9366)

Full Changelog: https://github.com/remix-run/react-router/compare/[email protected]@6.4.2

v5.3.4

We removed the mini-create-react-context dependency, moving it into an internal module to eliminate peer dependency warnings for users on React 18 (#9382).

Full Changelog: v5.3.3...v5.3.4

v6.4.1

What's Changed

Bug Fixes

• Preserve state from initialEntries (#9288)
• Preserve ?index for fetcher get submissions to index routes (#9312)

Full Changelog: https://github.com/remix-run/react-router/compare/[email protected]@6.4.1

v6.4.0

Whoa this is a big one! 6.4.0 brings all the data loading and mutation APIs over from Remix. Here's a quick high level overview, but it's recommended you go check out the docs, especially the feature overview and the tutorial.

New APIs

• Create your router with createMemoryRouter
• Render your router with <RouterProvider>
• Load data with a Route loader and mutate with a Route action
• Handle errors with Route errorElement
• Defer non-critical data with defer and Await

react-router-dom APIs

• Create your router with createBrowserRouter/createHashRouter
• Submit data with the new <Form> component
• Perform in-page data loads and mutations with useFetcher()
• Defer non-critical data with defer and Await
• Manage scroll position with <ScrollRestoration>
• Perform path-relative navigations with <Link relative="path"> (#9160)

Bug Fixes

• Path resolution is now trailing slash agnostic (#8861)
• useLocation returns the scoped location inside a <Routes location> component (#9094)
• Respect the <Link replace> prop if it is defined (#8779)

v1.0.0

This is the first stable release of @remix-run/router, which provides all the underlying routing and data loading/mutation logic for react-router. You should not be using this package directly unless you are authoring a routing library similar to react-router.

For an overview of the features provided by react-router, we recommend you go check out the docs, especially the feature overview and the tutorial.

For an overview of the features provided by @remix-run/router, please check out the README.

[email protected]

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]

[email protected]

Patch Changes

• Updated dependencies
  • [email protected]
  • [email protected]

[email protected]

Patch Changes

• fix: rename resetScroll -> preventScrollReset (#9199)
• Updated dependencies
  • @remix-run/[email protected]

[email protected]

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

  • @remix-run/[email protected]

[email protected]

Patch Changes

• Updated dependencies
  • [email protected]