Passing properties to route components in React Router 4 (using TypeScript)

0React Router 4 Route with properties.md

Wrapper components for passing properties to components in

<RouteWithProps> -- renders a component, passing properties to the target component

<AuthRoute> -- only renders the route if the auth parameter is true

<AuthRouteWithProps> -- renders a component, passing properties to the target component, only is the auth parameter is true

1route-helper.tsx

import * as React from 'react'
import { Route } from 'react-router-dom'

// Properties passed to RouteWithProps
type RouteProps = {
  component: any // rendered component
  componentProps?: any // properties passed to the component
  [propName: string]: any // route properties
}
// Properties passed to AuthRoute
type AuthRouteProps = {
  component: any // rendered component
  auth: boolean // tells if the component should be rendered
  [propName: string]: any // route properties
}

/**
 * Pass properties to rendered component
 * @param param0 RouteProps
 */
const RouteWithProps = ({
  component: Component,
  componentProps = {},
  ...routeProps
}: RouteProps) => (
  <Route {...routeProps} render={(props) => <Component {...props} {...componentProps} />} />
)

/**
 * Only render component route if authentication is successful
 * @param param0
 */
const AuthRoute = ({ component: Component, auth, ...rest }: AuthRouteProps) => (
  <Route {...rest} render={(props) => (auth ? <Component {...props} /> : null)} />
)

/**
 * Render component and pass properties if authentication is successful
 * @param param0
 */
const AuthRouteWithProps = ({
  component: Component,
  componentProps,
  auth,
  ...routeProps
}: RouteProps & AuthRouteProps) =>
  auth ? (
    <RouteWithProps component={Component} componentProps={componentProps} {...routeProps} />
  ) : null

export { RouteWithProps, AuthRoute, AuthRouteWithProps }

2example.tsx

// import { AuthRoute, AuthRouteWithProps, RouteWithProps } from './route-helper'

<RouteWithProps
  exact
  path="/foo"
  component={MyComponent}
  componentProps={{ param: 'bar' }}
/>

/* Renders:
<Route exact={true} path="/foo">
  <MyComponent param="bar">
    ...
  </MyComponent>
</Route>
*/

<AuthRoute
  exact
  path="/foo"
  auth={myAuthFunction()}
  component={MyComponent}
/>

/* If myAuthFunction() returns true, renders:
<Route exact={true} path={/foo}>
  <MyComponent>
    ...
  </MyComponent>
</Route>
*/

<AuthRouteWithProps
  exact
  path="/component"
  auth={myAuthFunction()}
  component={MyComponent}
  componentProps={{ param: 'bar' }}
/>

/* If myAuthFunction() returns true, renders:
<RouteWithProps exact={true} path="/foo"
  <Route exact={true} path="/foo">
    <MyComponent param="bar">
      ...
    </MyComponent>
  </Route>
</RouteWithProps>
*/