breadcrumbs

src/components/Breadcrumbs.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+
+import { Link } from 'react-router-dom';
+
+import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import Typography from '@material-ui/core/Typography';
+
+class MyBreadcrumbs extends Component {
+  render() {
+    return (
+      this.props.content && this.props.content.length > 1 ?
+        <Breadcrumbs separator="›">
+          {this.props.content.splice(0, this.props.content.length-1).map((content, i) => (
+            <Link to={content.link} style={{textDecoration: 'none'}}>
+              <Typography color="secondary">{content.title}</Typography>
+            </Link>
+          ))}
+          <Typography color="textPrimary">{this.props.content.slice(-1)[0].title}</Typography>
+        </Breadcrumbs>
+      : null
+    );
+  };
+}
+
+export default MyBreadcrumbs;

src/components/Tutorial/Tutorial.js

@@ -2,11 +2,16 @@ import React, { Component } from 'react';
 
 import { withRouter } from 'react-router-dom';
 
+import Breadcrumbs from '../Breadcrumbs';
+
 class Tutorial extends Component {
   render() {
-    console.log(this.props);
     return (
-      <h1>Tutorial {this.props.match.params.tutorialId}</h1>
+      <div>
+        <Breadcrumbs content={[{link: '/', title: 'Home'},{link: '/tutorial', title: 'Tutorial'}, {link: `/tutorial/${this.props.match.params.tutorialId}`, title: this.props.match.params.tutorialId}]}/>
+
+        <h1>Tutorial {this.props.match.params.tutorialId}</h1>
+      </div>
     );
   };
 }

src/components/Tutorial/TutorialHome.js

@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
 
+import Breadcrumbs from '../Breadcrumbs';
+
 import tutorials from './tutorials.json';
 
 import { Link } from 'react-router-dom';
@@ -11,6 +13,8 @@ class TutorialHome extends Component {
   render() {
     return (
       <div>
+        <Breadcrumbs content={[{link: '/', title: 'Home'},{link: '/tutorial', title: 'Tutorial'}]}/>
+
         <h1>Tutorial-Übersicht</h1>
         <Grid container spacing={2}>
           {tutorials.map((tutorial, i) => (