如何创建 react-router v4 面包屑? [英] How do I create react-router v4 breadcrumbs?

问题描述

如何创建 react-router v4 面包屑?我尝试通过问题单在 react-router V4 网站上提出这个问题.他们只是说要查看递归路径示例.我真的很想在 semantic-ui-react

中创建它

解决方案

我也在追求同样的事情，而你的问题为我指明了正确的方向.

这对我有用:

const Breadcrumbs = (props) =>(<div className="面包屑">
<Route path='/:path' component={BreadcrumbsItem}/>

)const BreadcrumbsItem = ({ match, ...rest }) =>(<React.Fragment><li className={match.isExact ?'面包屑活动':未定义}><链接到={match.url ||''}>{匹配.url}</链接><路由路径={`${match.url}/:path`} component={BreadcrumbsItem}/></React.Fragment>)

How do I create react-router v4 breadcrumbs? I tried asking this question on the react-router V4 website via an issue ticket. They just said to see the recursive paths example. I really want to create it in semantic-ui-react

解决方案

I was after the same thing and your question pointed me in the right direction.

This worked for me:

const Breadcrumbs = (props) => (
    <div className="breadcrumbs">
        <ul className='container'>
            <Route path='/:path' component={BreadcrumbsItem} />
        </ul>
    </div>
)

const BreadcrumbsItem = ({ match, ...rest }) => (
    <React.Fragment>
        <li className={match.isExact ? 'breadcrumb-active' : undefined}>
            <Link to={match.url || ''}>
                {match.url}
            </Link>
        </li>
        <Route path={`${match.url}/:path`} component={BreadcrumbsItem} />
    </React.Fragment>
)

这篇关于如何创建 react-router v4 面包屑?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！