反応ルータを使用した動的ブレッドクラム

Question

breadcrumbs on site in examples folder of react-router repoを作成する方法の非常に良い例があります。しかし、私は動的ルートを使ってブレッドクラムを作成する方法を知っています。

たちはこの設定があるとします。

ReactDOM.render((
<Router history={browserHistory}> 
    <Route path="/projects" component={ProjectsApp}> 
     <IndexRoute component={ProjectsDashboard} /> 
     <Route path=":projectId" component={ProjectBoard}> 
      <Route path=":taskId" component={ProjectTaskBoard}> 
     </Route> 
    </Route> 
</Router> 
), document.getElementById('app')); 

私はこのような何かをしたい：

プロジェクト（ '/プロジェクト' へのリンク） - 「/プロジェクト/ 11まで> MyAwesomeProject（リンク - > MyTask（ '/ projects/11/999'へのリンク）

この結果はどのようにして得られますか？ベストプラクティスはありますか？ありがとう。

Answer 1

react-router v4では、すべてのルートが動的です（ただし、静的な定義を書き込むオプションはまだあります）。

リアクションブレッドクラムは、リアクションルータのバージョン3でこれを実装するためのokソリューションです。あなたが記述した動的ブレッドクラム（例えば、prependまたはgetDisplayName小道具を使用する）の回避策もありました。

in this issueには会話があり、あなたの質問にも結びついている反応ルータv4をどのようにサポートするのが最適かを判断します。私は同じ静的ルートの問題から苦労していると思われる他のパンくずリストコンポーネントリポジトリを掘り下げました。これらのリポジトリには、v4サポートを見つけるために開いた同様の問題があります。

TLDR;あなたがまだreact-router v3にいるならば、反応ブレッドクラムパッケージをダイナミックブレッドクラムで動作させることができます。 v4に移行した場合は、調整しておいてください

更新：

私は解決策を開発し、反応させ、パン粉リポジトリにpull requestを開いた私のニーズに合う他の解決策を見つけていない後。 Auto-breadcrumb、およびthis discussionも潜在的な解決策ですが、カスタマイズは少なくて済みます。さらにカスタマイズする必要がある場合は、購読して、PRにコメントしたり、助けてください。

Answer 2

Auto-Breadcrumbは、リアクタのバージョン4を使用している場合に最適な選択肢です。私はまだ素晴らしいチュートリアルを見つけましたが、コメントはありませんが、かなり利用可能です。simple demoが利用可能です。

Answer 3

は、我々は（反応し、ルータのV4を含む）すべてのルータのための最も

柔軟でパッケージreact-breadcrumbs-dynamicを使用しています。

import { 
    BreadcrumbsProvider, 
    Breadcrumbs, 
    BreadcrumbsItem 
} from 'react-breadcrumbs-dynamic' 

const theApp = (
    <BreadcrumbsProvider> 
    <App /> 
    </BreadcrumbsProvider> 
) 

const App = (props) => (
    return (
    <div className="App"> 
     <Breadcrumbs/> 
     {props.children} 
    </div> 
) 
} 

const Page = (props) => (
    <div> 
    <BreadcrumbsItem to='/'>Main Page</BreadcrumbsItem> 
    {props.children} 
    <Route exact path="/user" component={User} /> 
    </div> 
) 


const User = (props) => (
    <div> 
    <BreadcrumbsItem to='/user'>Home</BreadcrumbsItem> 
    <h2>Home</h2> 
    </div> 
) 

レポはこちらです：react-breadcrumbs-dynamic

Answer 4

これを行うには、いくつかの方法、およびいくつかのオープンソース・ソリューションがあります（ここでも同様の回答を参照してください。How do I create react-router v4 breadcrumbs?）を

個人的に、私はHOCを好みます小さな表面積、レンダリングの柔軟性、および読み取り可能なブレッドクラム経路設定のためのソリューションです。

Breadcrumbs.jsx

import React from 'react'; 
import { NavLink } from 'react-router-dom'; 
import { withBreadcrumbs } from 'withBreadcrumbs'; 

const UserBreadcrumb = ({ match }) => 
    <span>{match.params.userId}</span>; // use match param userId to fetch/display user name 

const routes = [ 
    { path: 'users', breadcrumb: 'Users' }, 
    { path: 'users/:userId', breadcrumb: UserBreadcrumb}, 
    { path: 'something-else', breadcrumb: ':)' }, 
]; 

const Breadcrumbs = ({ breadcrumbs }) => (
    <div> 
    {breadcrumbs.map(({ breadcrumb, path, match }) => (
     <span key={path}> 
     <NavLink to={match.url}> 
      {breadcrumb} 
     </NavLink> 
     <span>/</span> 
     </span> 
    ))} 
    </div> 
); 

export default withBreadcrumbs(routes)(Breadcrumbs); 

withBreadcrumbs.js

import React from 'react'; 
import { matchPath, withRouter } from 'react-router'; 

const renderer = ({ breadcrumb, match }) => { 
    if (typeof breadcrumb === 'function') { return breadcrumb({ match }); } 
    return breadcrumb; 
}; 

export const getBreadcrumbs = ({ routes, pathname }) => { 
    const matches = []; 

    pathname 
    .replace(/\/$/, '') 
    .split('/') 
    .reduce((previous, current) => { 
     const pathSection = `${previous}/${current}`; 

     let breadcrumbMatch; 

     routes.some(({ breadcrumb, path }) => { 
     const match = matchPath(pathSection, { exact: true, path }); 

     if (match) { 
      breadcrumbMatch = { 
      breadcrumb: renderer({ breadcrumb, match }), 
      path, 
      match, 
      }; 
      return true; 
     } 

     return false; 
     }); 

     if (breadcrumbMatch) { 
     matches.push(breadcrumbMatch); 
     } 

     return pathSection; 
    }); 

    return matches; 
}; 

export const withBreadcrumbs = routes => Component => withRouter(props => (
    <Component 
    {...props} 
    breadcrumbs={ 
     getBreadcrumbs({ 
     pathname: props.location.pathname, 
     routes, 
     }) 
    } 
    /> 
)); 

オープンソースHOCはこちらもご覧になれます。 https://github.com/icd2k3/react-router-breadcrumbs-hoc