[V6] [Feature] Getting `usePrompt` and `useBlocker` back in the router

Explanation of the problem

In general, it seems that the majority of users will face difficulties upgrading to version 6 of the software since the latest beta release has removed the usePrompt and useBlocker functionalities. These features are commonly relied upon by applications to handle navigation prevention in scenarios where the user has unsaved changes, often referred to as a “dirty” form.

Given the impact of this change, it would be beneficial to gather feedback and insights regarding the reasons behind the removal of usePrompt and Prompt in the latest beta release (version 6.0.0-beta.6). Understanding the specific challenges or issues that made these functionalities problematic can shed light on the rationale behind their removal. Additionally, it would be helpful to explore the future prospects of reintroducing these features into the router or identifying potential solutions within the userland.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for [v6] [Bug]: “No routes matched” warning is too noisy in Remix Run React Router

form.addEventListener('input', () => {
  localStorage.setItem('formState', JSON.stringify(new FormData(form)))
})

const savedState = JSON.parse(localStorage.getItem('formState'))
if (savedState) {
  new FormData(form).forEach((value, key) => {
    if (savedState[key]) form.elements[key].value = savedState[key]
  })
}

Problem: No routes matched warning is too noisy

One common problem with React Router is that the “No routes matched” warning can be too noisy, appearing frequently when navigating between routes. This can be particularly frustrating when using dynamic routes or when using subpaths.

Solution:

To solve this problem, you can add a switch component to your router and set the exact prop on each route. This will ensure that only one route is matched at a time, and the warning will only appear when no routes match. Here is an example of how you can use the exact prop in your routes:

import { Switch, Route } from 'react-router-dom'

function App() {
  return (
    <Switch>
      <Route exact path='/' component={Home} />
      <Route exact path='/about' component={About} />
      <Route exact path='/contact' component={Contact} />
    </Switch>
  )
}

Problem: Handling 404 errors

Another common problem with React Router is handling 404 errors when a user navigates to a non-existent route. By default, React Router does not provide a way to handle these errors, and the user will simply see a blank page or the “No routes matched” warning.

Solution:

You can handle 404 errors by using the switch component and providing a catch-all route. By using the path='*' you can match any route that has not been matched before. Here is an example of how you can use a catch-all route to handle 404 errors:

import { Switch, Route } from 'react-router-dom'

function App() {
  return (
    <Switch>
      <Route exact path='/' component={Home} />
      <Route exact path='/about' component={About} />
      <Route exact path='/contact' component={Contact} />
      <Route path='*' component={NotFound} />
    </Switch>
  )
}

Problem: Lazy loading routes

Another common problem with React Router is lazy loading routes. When an application has many routes, it can lead to slow load times and a large bundle size. Lazy loading routes can help to mitigate this issue by only loading the components that are needed for a particular route.

Solution:

You can use the React.lazy() function to lazy load routes. It allows you to load a component lazily when a route is accessed. Here is an example of how you can use React.lazy() to load a component lazily:

import { Switch, Route, Suspense } from 'react-router-dom'
const Home = React.lazy(() => import('./Home'))
const About = React.lazy(() => import('./About'))
const Contact = React.lazy(() => import('./Contact'))

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/about' component={About} />
        <Route exact path='/contact' component={Contact} />
      </Switch>
    </Suspense>
  )
}

A brief introduction to React Router

Remix Run React Router is a client-side routing library for React applications. It allows developers to declaratively map URL paths to components, allowing for intuitive navigation and dynamic updates to the user interface. The library utilizes the React Hooks API to manage the routing state within the application and provides a set of hooks for accessing and modifying that state, such as useParams and useNavigate.

Remix Run React Router also supports dynamic routing, where a portion of the URL path is treated as a variable and passed as a prop to the corresponding component. This allows for the creation of dynamic, parameterized routes that can be used to display different content based on the values in the URL. Additionally, the library provides a Link component that can be used to navigate to different routes within the application, and a Redirect component for redirecting users to a different route. All of these features make Remix Run React Router an excellent choice for building complex, feature-rich React applications with dynamic navigation.

Most popular use cases for React Router

<Router>
  <Route path="/users/:userId" component={UserProfile} />
</Router>

<Link to="/about">About</Link>

<Redirect to="/login" />