Named Routes w/ React Router 4

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import { BrowserRouter as Router } from 'react-router-dom';
import Link from './components/Link';
import { Routes } from './routes';

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <div className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h2>Welcome to React</h2>
            
            <Link name='user_profile' params={{ id: 12 }}>This is a Test</Link>
          </div>
          <Routes />
        </div>
      </Router>
    );
  }
}

export default App;

Link.js

import React from 'react';
import { Link as PathLink } from 'react-router-dom';
import pathToRegexp from 'path-to-regexp';
import _ from 'lodash';

import { routes } from '../routes';

const Link = (props) => {
  const { name, to, params, children } = props;
  const route = _.find(routes, { name });
  const toPath = (to) ? to : pathToRegexp.compile(route.path)(params);
  return (
    <PathLink to={toPath} {..._.omit(props, ['to', 'name', 'params', 'children'])}>{children}</PathLink>
  );
}

export default Link;

Route.js

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

const Route = (route) => {
  return (
    <PlainRoute
      path={route.path}
      render={props => (
        <route.component {...props} routes={route.routes} />
      )}
    />
  );
}

export default Route;

routes.js

import React from 'react';
import Route from './components/Route';

import UserProfile from './containers/UserProfile';

export const routes = [
  {
    name: 'user_profile',
    path: '/user/:id',
    component: UserProfile
  }
];

export const Routes = () => {
  return (
    <div>
      {routes.map((route, i) => (
        <Route key={i} {...route} />
      ))}
    </div>
  );
}