1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import classNames from 'classnames';
import { Link, Route } from 'react-router-dom';
import styles from './breadCrumb-jss';
const Breadcrumbs = (props) => {
const {
classes,
theme,
separator,
location
} = props;
return (
<section className={classNames(theme === 'dark' ? classes.dark : classes.light, classes.breadcrumbs)}>
<Route
path="*"
render={() => {
let parts = location.pathname.split('/');
const place = parts[parts.length - 1];
parts = parts.slice(1, parts.length - 1);
return (
<p>
You are here:
<span>
{
parts.map((part, partIndex) => {
const path = ['', ...parts.slice(0, partIndex + 1)].join('/');
return (
<Fragment key={path}>
<Link to={path}>{part}</Link>
{ separator }
</Fragment>
);
})
}
{place}
</span>
</p>
);
}}
/>
</section>
);
};
Breadcrumbs.propTypes = {
classes: PropTypes.object.isRequired,
location: PropTypes.object.isRequired,
theme: PropTypes.string.isRequired,
separator: PropTypes.string.isRequired,
};
export default withStyles(styles)(Breadcrumbs);
|
