Giter Club home page Giter Club logo

module-federation-react-router-dom's Introduction

Module Federation - React Router DOM Example

This example shows how to handle indipendent and nested routings in a MFE setup based on webpack-module-federation. The setup consists of:

  • app1 & app2: apps using a browser history strategy when acting as hosts and an in-memory history strategy when acting as remotes.
  • shell: host app based on a browser history strategy that handles high-level routing. Shell routing determines mounting/unmounting of app1 and app2 remotes.

The shell is the only component responsible for updating browser url. The two level of history strategies (browser + in-memory) are kept in sync through an event-based communication between shell and remotes.


Running Demo

  1. (Optional) Select node version with node version manager by running nvm use. The repo has been battle-tested with v16 Node.js version.
  2. Install deps by running npm install. Since the repo is based on npm workspaces the command will install deps for all MFEs.
  3. Start apps by running npm start.

Credits

The setup is inspired to https://github.com/StephenGrider/mfe.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.