प्रतिक्रिया राउटर

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')); 

मैं कुछ इस तरह बनाना चाहते: ('/ परियोजनाओं' के लिए लिंक)

परियोजनाओं -> MyAwesomeProject ('/ परियोजनाओं के लिए लिंक/11 'शीर्षक कहीं से लिया गया है (रूट पैराम से आईडी द्वारा स्टोर या किसी अन्य तरीके से)) -> माईटास्क (' परियोजनाओं/परियोजनाओं/11/99 9 'से लिंक)

मैं इस परिणाम को कैसे प्राप्त कर सकता हूं? क्या कोई सर्वोत्तम प्रथा है? धन्यवाद।

Answer 1

प्रतिक्रिया-राउटर v4 के साथ, सभी मार्ग गतिशील होते हैं (हालांकि मुझे लगता है कि स्थिर परिभाषाएं लिखने के विकल्प अभी भी हैं)।

जैसा कि टिप्पणी में @ टीबीओ द्वारा उल्लिखित है, प्रतिक्रिया-ब्रेडक्रंब प्रतिक्रिया-राउटर के संस्करण 3 के साथ इसे लागू करने के लिए एक अच्छा समाधान था। आपके द्वारा वर्णित गतिशील ब्रेडक्रंब के लिए कुछ कामकाज भी थे (उदाहरण के लिए prepend या getDisplayName प्रोप का उपयोग करना)।

प्रतिक्रिया-राउटर v4 का सर्वोत्तम समर्थन करने का तरीका निर्धारित करने के लिए in this issue पर एक वार्तालाप चल रहा है जो निश्चित रूप से आपके प्रश्न में भी जुड़ा हुआ है। मैंने अन्य ब्रेडक्रंब्स घटक भंडारों के समूह के माध्यम से खोला है, जो सभी एक ही स्थिर मार्ग के मुद्दों से संघर्ष करते हैं, कुछ को v4 समर्थन को समझने के लिए समान समस्याएं खुलती हैं।

टीएलडीआर; यदि आप अभी भी प्रतिक्रिया-राउटर v3 पर हैं, तो आप शायद गतिशील ब्रेडक्रंब के लिए प्रतिक्रिया-ब्रेडक्रंब पैकेज काम कर सकते हैं। यदि आप v4 पर माइग्रेट हो गए हैं, तो देखते रहें और मुझे उम्मीद है कि जल्द ही एक बेहतर उत्तर होगा।

अद्यतन:

कोई अन्य समाधान है कि मेरी जरूरतों मैं एक समाधान विकसित किया है और प्रतिक्रिया-ब्रेडक्रंब भंडार पर एक pull request खोला फिट खोजने के बाद। Auto-breadcrumb, जैसा कि नीचे उल्लिखित है, और this discussion भी संभावित समाधान हैं लेकिन कम अनुकूलन की अनुमति देते हैं। यदि आपको अधिक अनुकूलन की आवश्यकता है, तो सदस्यता लें और पीआर के साथ मदद करने के लिए स्वतंत्र महसूस करें।

Answer 2

Auto-Breadcrumb यदि आप रिएक्ट राउटर के संस्करण 4 पर हैं तो सबसे अच्छा विकल्प प्रतीत होता है। मुझे अभी तक एक अच्छा ट्यूटोरियल नहीं मिला है लेकिन एक असम्बद्ध है, लेकिन काफी simple demo उपलब्ध है।

Answer 3

हम पैकेज react-breadcrumbs-dynamic जो किसी भी रूटर के लिए सबसे

लचीला है का उपयोग (शामिल प्रतिक्रिया रूटर v4)।

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?) कर रहे हैं

व्यक्तिगत रूप से, मैं एक अस्थायी पसंद करते हैं छोटे सतह क्षेत्र की वजह से समाधान, लचीलापन प्रदान करना, और पठनीय ब्रेडक्रंब मार्ग कॉन्फ़िगरेशन।

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, 
     }) 
    } 
    /> 
)); 

ओपन-सोर्स हॉक यहां भी उपलब्ध है: https://github.com/icd2k3/react-router-breadcrumbs-hoc