skt-t1-byungi/react-router-refreshable

Supports refresh (remount) on react-router-dom

react-router-refreshable

Supports refresh (remount) on react-router-dom

Install

npm i react-router-refreshable

Example

import { Refreshable } from 'react-router-refreshable'

<Layout>
    <Refreshable>
        <Switch>
            <Route path="/home">
                <HomePage />
            </Route>
            <Route path="/post">
                <PostPage />
            </Route>
            {/* ... */}
        </Switch>
    </Refreshable>
</Layout>

Description

When the user clicks on a link with the same url as the current url on the react-router, nothing happens. However, most users expect the page to refresh. Solving with location.reload() (or <BrowserRouter forceRefresh />) is wasteful.

The Refreshable component of react-router-refreshable remounts children when history.push to the same url. It is possible to efficiently provide the user's expected result.

See a Demo

Nested Refreshable

Each page may have different areas to expect to refresh. Nested Refreshables can dynamically narrow the refresh area.

<Refreshable>
    <Route path="/teams/:teamId">
        {/* 👇 This component is not refreshed. */}
        <TeamsContentLayout>
            <Refreshable>
                <TeamPageHeader /> {/* 👈 This component can be refreshed. */}
            </Refreshable>
            {/* ... */}
            <Refreshable>
                <TeamPageContent /> {/* 👈 This component can be refreshed. */}
            </Refreshable>
        </TeamsContentLayout>
    </Route>
    {/*...*/}
</Refreshable>

on event listener prop

There is an on property that triggers when the refresh is started.

<Refreshable on={() => console.log('Start refreshing!')}>{/* ... */}</Refreshable>

useIsRefreshingRef()

useIsRefreshingRef() returns a RefObject indicating whether it is refreshing. Although not recommended, ignoring some logic in the effects hook can improve performance.

import { useIsRefreshingRef } from 'react-router-refreshable'

function Page() {
    const isRefreshingRef = useIsRefreshingRef()

    useEffect(() => {
        if (!isRefreshingRef.current) {
            /* ... Run only when not refresh */
        }
        return () => {
            if (!isRefreshingRef.current) {
                /* ... Run only when not refresh */
            }
        }
    }, [])

    /* ... */
}

License

MIT

react-router-refreshable's Issues

Trying to add Refreshable Component and i am getting an error on console.

Error:

../node_modules/react-router-refreshable/dist/esm/index.js 53:20
Module parse failed: Unexpected token (53:20)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     if (isRefreshRender) {
|       forceUpdate();
>       onRef.current?.();
|     }
|   }, [isRefreshRender]);
console.<computed> @ index.js:1
overrideMethod @ react_devtools_backend.js:2540
handleErrors @ webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213

package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.15.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.24.0",
    "moment": "^2.29.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.3.0",
    "react-router-refreshable": "^0.3.0",
    "react-scripts": "4.0.3",
    "react-tidy": "^1.3.2",
    "react-transition-group": "^4.4.2",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

App.js

import {BrowserRouter as Router, Redirect, Route, Switch} from "react-router-dom";
import UsersPage from "./users/pages/UsersPage";
import MainNavigation from "./shared/components/Navigation/MainNavigation";
import MoviesPage from "./movies/pages/MoviesPage";
import EditUserPage from "./users/pages/EditUserPage";
import AuthPage from "./auth/pages/AuthPage";
import {AuthContext} from "./shared/context/auth-context";
import NewUserPage from "./users/pages/NewUserPage";
import NewMoviePage from "./movies/pages/NewMoviePage";
import EditMoviePage from "./movies/pages/EditMoviePage";
import MembersPage from "./members/pages/MembersPage";
import {useAuth} from "./shared/hooks/auth-hook";
import { Refreshable } from 'react-router-refreshable'

const App = () => {
    const { token, login, logout, name } = useAuth();
    let routes;
    if (token) {
        routes = (
            <Switch>
                <Route path="/users" exact>
                    <UsersPage/>
                </Route>
                <Route path="/users/:_id" exact>
                    <EditUserPage/>
                </Route>
                <Route path="/add/user" exact>
                    <NewUserPage/>
                </Route>
                <Route path="/members" exact>
                    <MembersPage/>
                </Route>
                <Route path="/movies" exact>
                    <MoviesPage/>
                </Route>
                <Route path="/movies/:_id" exact>
                    <EditMoviePage/>
                </Route>
                <Route path="/add/movie" exact>
                    <NewMoviePage/>
                </Route>
                <Redirect to="/movies"/>
            </Switch>
        );
    } else {
        routes = (
            <Switch>
                <Route path="/auth" exact>
                    <AuthPage/>
                </Route>
                <Redirect to="/auth"/>
            </Switch>
    )
    }

    return (
        <AuthContext.Provider value={{isLoggedIn: !!token,token:token, name: name, login: login, logout: logout}}>
            <Router>
                <MainNavigation/>
                <main>
                    <Refreshable>
                        {routes}
                    </Refreshable>
                </main>
            </Router>
        </AuthContext.Provider>)
}

export default App;

What is wrong here?

Thanks,

Or Hasson