Keep the current page rendered as a fallback until the new page is loaded with React.lazy and React.Suspense. Route level code splitting in react without screen flickering (React Suspense + React Router Dom + React Topbar Progress Indicator)
Using npm:
npm i --save react-current-page-fallbackUsing yarn:
yarn add react-current-page-fallbackimport { FallbackProvider } from "react-current-page-fallback"; // Wrapp root FallbackProvider for all routes <FallbackProvider> your app routes here... </FallbackProvider> // Wrapp every page using FallbackPageWrapper import { FallbackPageWrapper } from "react-current-page-fallback"; <FallbackPageWrapper> your page-1 here... </FallbackPageWrapper> <FallbackPageWrapper> your page-2 here... </FallbackPageWrapper> ...index.js
import React from "react"; import { createRoot } from "react-dom/client"; import App from "./App"; const container = document.getElementById("root"); const root = createRoot(container); // createRoot(container!) if you use TypeScript root.render(<><App/></>);App.js
import React from "react"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import { FallbackProvider } from "react-current-page-fallback"; const Home = React.lazy(() => import("./pages/Home")); const About = React.lazy(() => import("./pages/About")); const Contact = React.lazy(() => import("./pages/Contact")); // react-router-dom V6 const App = () => { return ( <Router> <div> <FallbackProvider> <Routes> <Route path="/about" element={ <About />} /> <Route path="/contact" element={ <Contact />} /> <Route path="/" element={ <Home />} /> </Routes> </FallbackProvider> </div> </Router> ); }; export default App;App.js
import React from "react"; import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; import { FallbackProvider } from "react-current-page-fallback"; // react-router-dom V5 const App = () => { return ( <Router> <div> <FallbackProvider> <Switch> <Route path="/about"> <About /> </Route> <Route path="/contact"> <Contact /> </Route> <Route path="/"> <Home /> </Route> </Switch> </FallbackProvider> </div> </Router> ); }; export default App;Nav.js
import React from 'react'; import { Link } from 'react-router-dom'; export const Nav = () => { return ( <> <Link to="/">Home</Link> <Link to="/about">About</Link> <Link to="/contact">Contact</Link> </> ); }; export default Nav;Home.js
import React from 'react'; import { Nav } from '../components/Nav'; import { FallbackPageWrapper } from "react-current-page-fallback"; const Home = () => { return ( <FallbackPageWrapper> <div> <Nav /> <h1>Home</h1> </div> </FallbackPageWrapper> ); }; export default Home;About.js
import React from 'react'; import { Nav } from '../components/Nav'; import { FallbackPageWrapper } from "react-current-page-fallback"; const About = () => { return ( <FallbackPageWrapper> <div> <Nav /> <h1>About</h1> </div> </FallbackPageWrapper> ); }; export default About;Contact.js
import React from 'react'; import { Nav } from '../components/Nav'; import { FallbackPageWrapper } from "react-current-page-fallback"; const Contact = () => { return ( <FallbackPageWrapper> <div> <Nav /> <h1>Contact</h1> </div> </FallbackPageWrapper> ); }; export default Contact;
You can run the example by cloning the repo:
git clone https://github.com/asifvora/react-current-page-fallback.git yarn yarn startThis project is licensed under the MIT License - see the LICENSE file for details.
- Github: @asifvora
- LinkedIn: @asif-vora
- Twitter: @007_dark_shadow
- Instagram: @007_dark_shadow
-
Please contribute using GitHub Flow. Create a branch, add commits, and open a pull request.
-
Please read
CONTRIBUTINGfor details.
This project needs a ⭐️ from you. Don't forget to leave a star ⭐️