Làm cách nào để tạo đường dẫn v4 phản ứng-bộ định tuyến?

Question

Làm cách nào để tạo đường dẫn v4 phản ứng-bộ định tuyến? Tôi đã thử hỏi câu hỏi này trên trang web phản ứng-router V4 thông qua một vé phát hành. Họ chỉ nói để xem ví dụ recursive paths. Tôi thực sự muốn tạo nó trong semantic-ui-react

Answer 1

Tôi đã làm điều tương tự và câu hỏi của bạn đã chỉ cho tôi đúng hướng.

này đã làm việc cho tôi:

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

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

Answer 2

tôi đã sử dụng semantic-ui-react cho dự án của riêng tôi và đã làm điều này để tạo đường dẫn dựa trên location.pathname;

export default (props) => { 
    const paths = props.pathname.split('/').map((p, i, arr) => { 
     if (i === 0) return { 
      key: i, 
      content: (<Link to={'/'}>home</Link>), 
      active: (i === arr.length - 1), 
      link: (i < arr.length - 1) 
     }; 

     if (i === arr.length - 1) return { 
      key: i, 
      content: p, 
      active: (i === arr.length - 1) 
     }; 

     return { 
      key: i, 
      content: (<Link to={`${arr.slice(0, i + 1).join('/')}`}>{p}</Link>), 
      active: (i === arr.length - 1), 
      link: (i < arr.length - 1)} 
     }; 
    ); 
    return <Breadcrumb icon='chevron right' sections={paths}/>; 
}; 

Answer 3

Vấn đề với cả hai phương pháp này là bạn bị giới hạn sử dụng tên đường dẫn trong đường dẫn; có nghĩa là, bạn phải buộc định tuyến của mình vào tên bản trình bày của đường nhỏ.

Answer 4

Hãy thử giải pháp này rất đơn giản:

const Breadcrumbs = ({ ...rest, match }) => (
    <span> 
     <Link to={match.url || ''} className={match.isExact ? 'breadcrumb active' : 'breadcrumb'}> 
      {match.url.substr(match.url.lastIndexOf('/')+1, match.url.length)} 
     </Link> 
     <Route path={`${match.url}/:path`} component={Breadcrumbs} /> 
    </span> 
) 

css của bạn:

.breadcrumbs { 
    background: #fff; 
    margin-bottom: 15px; 
} 
.breadcrumb { 
    margin-bottom: 0; 
    line-height: 2.5; 
    display: inline-block; 
} 
.breadcrumb::before { 
    display: inline-block; 
    padding-right: 5px; 
    padding-left: 5px; 
    color: #818a91; 
    content: "/"; } 
.breadcrumb.active { 
    color: #818a91; } 

Sau đó sử dụng nó như thế này:

<div className="container-fluid breadcrumbs"> 
    <Route path='/:path' component={Breadcrumbs} /> 
</div> 

Chúc mừng mã hóa!

Answer 5

Điều này có thể được thực hiện bằng cách sử dụng HOC phân tích cú pháp pathname từ bộ phản ứng-bộ định tuyến và trả về kết quả khớp với nó. Trong khi một chút chi tiết hơn, tôi nghĩ rằng nó cung cấp cho sự linh hoạt lớn hơn và một mảng đối tượng cấu hình breadcrumb dễ đọc.

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}> // wrap breadcrumb with semantic-ui element 
      {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, 
     }) 
    } 
    /> 
)); 

nguồn mở HOC cũng có sẵn ở đây: https://github.com/icd2k3/react-router-breadcrumbs-hoc

Answer 6

Từ react-router doc: các <Route> componens được render một số linh kiện của bạn khi một vị trí khớp với đường dẫn của tuyến đường như điều này:

<Route path={`${match.url}/:topicId`} component={Topic}/> 

Trách nhiệm cơ bản đối với thông tin có sẵn cho thành phần kết hợp là <Topic> trong trường hợp này. Nó biết làm thế nào để lấy dữ liệu hoặc nó đã được gắn với trạng thái redux và vân vân. Vì vậy, <Topic> đơn giản hóa bột bánh mì đại lý mục và chuyển dữ liệu cần thiết cho nó như sau:

import {BreadcrumbsItem} from 'react-breadcrumbs-dynamic' 

const Topic = ({ match, topic }) => (
    <div> 
    <h3> 
     {topic.title} 
    </h3> 

    <BreadcrumbsItem to={`${match.url}/${match.params.topicId}`}> 
     {topic.title} 
    </BreadcrumbsItem> 

    ... 
    </div> 
) 

Đó là tất cả. Ví dụ đầy đủ hơn trong this answer. Sống ở đây demo.