react-router-util

Useful components and utilities for working with React Router

Install

$ npm install react-router-util

Usage

import {ipcRenderer as ipc} from 'electron';
import React from 'react';
import {Route, Link} from 'react-router-dom';
import {history, BrowserRouter as Router, Debug} from 'react-router-util';

ipc.on('goto-about', () => {
	history.push('/about');
});

const App = () => (
	<Router>
		<>
			<Debug/>

			<ul>
				<li><Link to="/">Home</Link></li>
				<li><Link to="/about">About</Link></li>
			</ul>

			<hr/>

			<Route exact path="/" component={Home}/>
			<Route path="/about" component={About}/>
		</>
	</Router>
);

API

history

A history singleton that you can use in <Router history={history}> to access the history from outside the router. Can be useful for programmatically navigating to a route when used in combination with non-React code, like Electron IPC events, etc.

<BrowserRouter> and <StaticRouter>

Same as the official <BrowserRouter> and <StaticRouter>, but with history={history} set to the above history singleton, so you can just import the singleton to access the router history object from outside the router. This behavior can be overridden with <BrowserRouter history={yourOwnHistory}>.

<Debug/>

Unrendered React component that prints the props of the current route component to the console when not in production.

<CurrentRoute/>

React component that renders the pathname of the current route. For example: /dashboard.

<RouteWithProps/>

Like <Route/>, but passes additional props to the given component. The following props are passed to the route: path, component, exact, strict, location, sensitive, while the rest are passed to the component.

Before:

<Route path="/unicorn" render={props => <Unicorn {...props} foo={'cake'} bar/>}/>

After:

<Route path="/unicorn" component={Unicorn} foo={'cake'} bar/>

<AuthenticatedRoute/>

An authenticated version of <Route/>. You pass it an isAuthenticated prop with a boolean of whether it's authenticated. If it's true, it will render the given component or redirect to the given redirectTo path. If it's false, it will redirect to /login or loginPath if specified. You can specify redirectFromLoginTo to have it redirect somewhere from the loginPath when authenticated. It accepts all the props <Route/> accepts except for render. Additional props are passed to the component. You can also pass it children.

Before:

<Route path="/" exact render={props => (
	isLoggedIn ? <MainView {...props}/> : <Redirect to="/login"/>
)}/>

After:

<AuthenticatedRoute
	path="/"
	exact
	isAuthenticated={isLoggedIn}
	component={MainView}
/>

Another example:

<AuthenticatedRoute
	path="/admin"
	isAuthenticated={isLoggedIn}
	redirectTo="/admin/dashboard"
	loginPath="/admin/login"
/>

Yet another example:

<AuthenticatedRoute isAuthenticated={this.state.isLoggedIn} redirectFromLoginTo="/dashboard">
	<Switch>
		<RouteWithProps path="/login" component={Login} {...this.state}/>
		<RouteWithProps component={Main} {...this.state}/>
	</Switch>
</AuthenticatedRoute>

Example with nested routes:

<AuthenticatedRoute path="/dashboard/:nested" isAuthenticated={this.state.isLoggedIn}>
	<Switch>
		<RouteWithProps path="/information" component={Information} {...this.state}/>
		<RouteWithProps path="/contact" component={Contact} {...this.state}/>
	</Switch>
</AuthenticatedRoute>

When using nested routes, the :nested value must be specified in the outer route so that matchPath can map it to the correct nested route (/information and /contact in this case).

<ConditionalRoute/>

A conditional version of <Route/>. You pass it a conditional prop with a boolean. If it's truthy, either the given trueComponent will be rendered or it will redirect to trueRedirectTo. If it's falsy, either the given falseComponent will be rendered or it will redirect to trueRedirectTo. It accepts all the props <Route/> accepts except for render.

Before:

<Route path="/" exact render={() => (
	isLoggedIn ? <MainView/> : <Redirect to="/login"/>
)}/>

After:

<ConditionalRoute
	path="/"
	exact
	conditional={isLoggedIn}
	trueComponent={MainView}
	falseRedirectTo="/login"
/>

It's a little bit more verbose, but declarative FTW.

<BackLink>

Like <Link>, but navigates to the previous route in the history. Accepts any props <Link> supports except for to.

<ForwardLink>

Like <Link>, but navigates to the next route in the history. Accepts any props <Link> supports except for to.

Related

• react-extras - Useful components and utilities for working with React