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 ⭐️