Material-UI面包屑与react-router集成 [英] Material-UI Breadcrumb Integration with react-router
问题描述
我正在尝试将Material-UI面包屑与react-router一起使用.如何以编程方式检测当前路线.
I'm trying to use the Material-UI breadcrumb with react-router. How can I programatically detect the current route.
在Material-UI网站上有一个有关如何使用它的示例，但它需要使用静态的BreadcrumbNameMap.我已经尝试使用HOC"withRouter"拆分路径名，但是它不起作用.
On the Material-UI website there is an example on how to use it but it requires the usage of a static breadcrumbNameMap. I already tried to split the pathname by using the HOC "withRouter" but it doesn't work.
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Breadcrumbs, Link, Paper, Typography} from "@material-ui/core";
import { withRouter } from "react-router-dom";
import { useTranslation } from "../Translate";
const useStyles = makeStyles(theme => ({
root: {
justifyContent: "center",
flexWrap: "wrap",
},
paper: {
padding: theme.spacing(1, 2),
},
}));
const breadcrumbNameMap = {
"/inbox": "Inbox",
"/inbox/important": "Important",
"/trash": "Trash",
"/spam": "Spam",
"/drafts": "Drafts",
};
function SimpleBreadcrumbs(props) {
const classes = useStyles();
console.log("Breadcrumbs", props);
const { location } = props;
const pathnames = location.pathname.split("/").filter(x => x);
console.log("pathnames", pathnames);
return (
<div className={classes.root}>
<Paper elevation={0} className={classes.paper}>
<Breadcrumbs aria-label="Breadcrumb">
<Link color="inherit" href="/">
Home
</Link>
{pathnames.map((value, index) => {
const last = index === pathnames.length - 1;
const to = `/${pathnames
.slice(0, index + 1)
.join("/")}`;
console.log("last", last, "to", to);
const path = value.split("-");
console.log("path", path);
// Convert first char of string to uppercase
path.forEach((item, i) => {
// Only capitalize starting from the second element
if (i > 0) {
path[i] =
path[i].charAt(0).toUpperCase() +
path[i].slice(1);
}
});
// return (
// <Typography color="textPrimary" key={to}>
// {useTranslation(path.join(""))}
// </Typography>
// );
// // return (
// // <Typography color="textPrimary" key={to}>
// // {pathnames[to]}
// // </Typography>
// // );
return last ? (
<Typography color="textPrimary" key={to}>
{breadcrumbNameMap[to]}
</Typography>
) : (
<Link color="inherit" to={to} key={to}>
{useTranslation(path.join(""))}
</Link>
);
})}
</Breadcrumbs>
</Paper>
</div>
);
}
export default withRouter(SimpleBreadcrumbs);
如果我的浏览器中的URL指向" http://example.com/level1/level2"，我希望面包屑的输出为:
If the URL in my browser points to "http://example.com/level1/level2", I would expected the output of the breadcrumb to be:
首页/一级/二级
如果浏览器中的URL为" http://example.com/level1/"，我希望:
If the URL in the browser would be "http://example.com/level1/", I would expect:
首页/1级
翻译也可以在以后添加.我包括它是为了显示我的最终预期结果.
The translation can also be added later. I included it for showing my final expected result.
推荐答案
我决定发布一个单独的答案，而不是对您的代码Meera进行注释.感谢您的帮助.我修改了地图功能的主体部分，并添加了翻译功能.遗憾的是，它不能通过react hooks功能使用，这就是为什么我将其转换为类组件.
I decided to post a separate answer instead of a comment to your code, Meera. Thank you for your help. I modified the body part of the map function and added the capability to translate. Sadly, it is not working for me with the react hooks feature, so thats why i converted it into a class component.
我的组件现在看起来像这样:
My component does now look like this:
import React, { PureComponent } from "react";
import * as PropTypes from "prop-types";
import { Breadcrumbs, Link, Paper, Typography } from "@material-ui/core";
import { connect } from "react-redux";
import { Route, Link as RouterLink } from "react-router-dom";
import { LanguageActions } from "../../redux/actions";
/**
* This component has to be a class component to be able
* to translate the path values dynamically.
* React hooks are not working in this case.
*/
class SimpleBreadcrumbs extends PureComponent {
render = () => {
const { translate } = this.props;
const LinkRouter = props => <Link {...props} component={RouterLink} />;
return (
<Paper elevation={0} style={{ padding: "8px 16px" }}>
<Route>
{({ location }) => {
const pathnames = location.pathname
.split("/")
.filter(x => x);
return (
<Breadcrumbs aria-label="Breadcrumb">
<LinkRouter
color="inherit"
component={RouterLink}
to="/"
>
Home
</LinkRouter>
{pathnames.map((value, index) => {
const last = index === pathnames.length - 1;
const to = `/${pathnames
.slice(0, index + 1)
.join("/")}`;
// Split value so the string can be transformed and parsed later.
const path = value.split("-");
// Convert first char of string to uppercase.
path.forEach((item, i) => {
// Only capitalize starting from the second element.
if (i > 0) {
path[i] =
path[i]
.charAt(0)
.toUpperCase() +
path[i].slice(1);
}
});
return last ? (
<Typography
color="textPrimary"
key={to}
>
{translate(path.join(""))}
</Typography>
) : (
<LinkRouter
color="inherit"
to={to}
key={to}
>
{translate(path.join(""))}
</LinkRouter>
);
})}
</Breadcrumbs>
);
}}
</Route>
</Paper>
);
};
}
// To be able to translate every breadcrumb step,
// translations have to be passed down to this component.
// Otherwise the component does not get notified
// if user decides to switch language
const connector = connect(
({ translations }) => ({ translations }),
dispatch => ({
translate: key => dispatch(LanguageActions.translate(key)),
})
);
SimpleBreadcrumbs.propTypes = {
translate: PropTypes.func,
};
SimpleBreadcrumbs.defaultProps = {
translate: () => {},
};
export default connector(SimpleBreadcrumbs);
这篇关于Material-UI面包屑与react-router集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
