Router with Guard — Takeaway routing solution for React project

Phạm Huy Phát
3 min readJan 28, 2019

Routing has always been a key aspect in developing web. There are many requirement in routing: code splitting, route guard, nested route, default loading screen…
With the react-router-guard, we hope to help you achieve all mentioned above with the least amount of effort, with all the logic needed grouping in one place

Link gitHub: https://github.com/laptransang/react-router-guard

1. Before react-router-guard

With the react-loadable recommended in the React document and given a ‘Home Page’ container component in HomePage.js like this:

function HomePage(props) {
return (<div> Greeting at my door </div>)
}

For a basic routing, you made a route.js file:

import Loadable from ‘react-loadable’;
import Loading from ‘./my-loading-component’;

And to do the code splitting with that you made a route.js:

const HomePageComponent = Loadable({
loader: () => import(‘./HomePage’),
loading: Loading,
});
class App extends Component {
render() {
<Router>
<Route exact path=”/” component={HomePageComponent} />
</Router>
}
}

That is just for the basic, now you want to add constraint on accessing the route. Given the scenario when I only want the logged in user to have the ability to access to ‘/profile’ route now you will create more HOC to make a fallback component:

// get the user's credential from local storage 
import { getUserProfile } from 'utils';
function checkAuth(
FallbackComponent,
...rest,
) {
const profile = getUserProfile();
if (!profile) {
return FallbackComponent
? <FallbackComponent {…rest} />
: <Redirect to="/" />
}
}
export default checkAuth();

Then in the route.js, wrap the dynamic loaded component with the new HOC:

import CheckAuth from 'guards/checkAuth';
const ProfilePage = Loadable({
loaded: () => import ('./ProfilePage'),
loading: Loading,
});
const ProfilePageFallback =
class App extends React.Component {
render() {

<Route exact path='/profile' component={ProfilePageFallback}/>

}
}

All of that just to have a guard on the registering route. You have to dynamic import in one place, wrap it in another and finally assign the url path in a component. Technically you can merge all the work in to one line of code but it would be a matter of nightmare

And now I introduce you — the react-router-guard library

2. The library we need and the library we deserve

Once installed, all the code written above can be reduced to this:

import { dynamicWrapper } from 'react-router-guard';
import { checkAuth } from "./guard";

In the config file:

export default [
{
path: '/',
component: dynamicWrapper(() => import ('./HomePage')),
},
{
canActivate: checkAuth,
path: '/',
component: dynamicWrapper(() => import ('./ProfilePage')),
},{
canActivate: checkNotAuth,
path: '/',
component: dynamicWrapper(() => import ('./SignInPage')),
}
]

About the checkAuth:

In the app file, just nest the route into one common browser

import {BrowserRouter} from 'react-router-dom';
import RouterGuard from ‘react-router-guard’;
function App() {
return (
<BrowserRouter>
<RouterGuard config={config} />
</BrowserRouter>
)
}

As you can see, all the configs are now combined into one config object. And the guards (which is listed as single/array element in the canActivate props) are promises. Those promises let the navigation pass if they resolve(true) and redirect to the error thrown by reject(‘path’)

Beside one primary purpose of a cleaner routing system set up and guards, the library also have different interesting feature that may come in handy in developing web, such as:

  • Default or customized loading UI component on unfinished routing
  • Template for nested route
  • Dynamic redirect with parameters

Find more about us and checkout the demo by going to https://github.com/laptransang/react-router-guard/blob/master/README.md

Let me know what’s good and what’s not by commenting below.
Once again, don’t forget to download the library and test it yourselves

github: https://github.com/laptransang/react-router-guard

--

--

Phạm Huy Phát

Người Việt Nam sống trên Internet là chủ yếu