How to implement the custom prompt on navigation using react-router

What’s the need for custom prompt ?

Most of the react projects follow the UI design system for their components. In order to achieve the same design consistency across the app, they reuse the components. However to block the navigation in case there are some unsaved user data, default browser prompt is the most common and easy way to block the user from navigating to different routes. But the popup does not match your library component.

There is no official docs explicitly mentioning how to use the custom modal instead of the default react-router Prompt.

Solution

There are…


How Output work and how they are used in webpack.

Before continuing the article, please refer to the below links if you have missed the previous articles

  1. https://yadhus.medium.com/introduction-to-webpack-5-27b1ed350a8
  2. https://yadhus.medium.com/what-is-entry-webpack-5-33eed050dd4

What is Output

Output is a property that tells webpack where to emit / save the bundles it creates and how to name these bundled files. By default the main output file gets stored in ./dist/main.js and other generated files are stored in ./dist.

module.exports = {
output: {
path: path.resolve(__dirname, "dist"),
filename: [name].js
}
}

Single or Multi-main entry points

Though the entry property can have one or multi paths, there can be only one output configuration specified.


How Entry Points work and how they are used in webpack.

Before continuing the article, please refer to the below link if you have missed the introduction to webpack 5

What is entry

Entry is a property that indicates webpack which module(s) / file(s) it should use to begin building out the internal dependency graph(s) of the project / application.

Three syntax of entry

  1. Single entry
  2. Multi-main entry
  3. Object entry

Single entry

The single entry syntax points to one file path to start building the dependency graph of the project / application. It is a great choice when you are looking to quickly setup a webpack configuration for an…


Basic understanding of what is webpack and how it works and why it is used in most of the modern JavaScript applications.

What is webpack

Webpack is a static module bundler for modern JavaScript applications. When webpack processes the application, it internally builds a dependency graph which maps every module (like node_modules, images, CSS, etc.) your project needs and generates one or more bundles.

Module Bundler — A tool that takes JavaScript & its dependencies and bundles them into a single / multiple files (to use in browser).

Dependency Graph — A graph that maps all the dependencies between files based on the order / hierarchy in which it is used or referenced.

Webpack builds and loads modules synchronously. It converts dependencies into modules and…

Yadhunandan S

Software engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store