React Router Project Groups

projects.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Link, Route } from 'react-router-dom';

const project_groups = {
    python: [
        {
            id: 'python-hello',
            title: 'Hello World',
            description: 'Hello world in python.'
        }
    ],
    javascript: [
        {
            id: 'js-gladiator',
            title: 'Gladiator',
            description: 'Web based gladiator game'
        }
    ],
    java: [],
    haskell: [
        {
            id: 'hs-dep-types',
            title: 'Dependent Types in Haskell',
            description:
                "Deep dive into Haskell's support for dependent types through building a dependent object calculs interpreter and type checker."
        }
    ]
};

const ProjectGroup = ({ match }) => {
    let group_name = match.params.projectgroup;
    let projects = project_groups[group_name];
    return (
        <div>
            <h3>{group_name}</h3>
            <ul>
                {projects.map(p => (
                    <li>
                        <h4>{p.title}</h4>
                        <p>{p.description}</p>
                    </li>
                ))}
            </ul>
        </div>
    );
};

const ProjectNav = () => {
    let groups = Object.keys(project_groups);

    return (
        <div>
            <h3>Groups</h3>
            {groups.map(g => (
                <p>
                    <Link to={g}>{g}</Link>
                </p>
            ))}
        </div>
    );
};

class Projects extends Component {
    render() {
        return (
            <Router>
                <div>
                    <ProjectNav />
                    <hr />
                    <Route path="/:projectgroup" component={ProjectGroup} />
                </div>
            </Router>
        );
    }
}

export default Projects;