Merge pull request #13 from zhonghuiwen/master

 Added routeMatcherRegex prop to allow customization for routeMatcher

Author: almmiko

README.md

@@ -123,7 +123,8 @@ class App extends Component {
               WrapperComponent={(props) => <ol className="breadcrumb" >{props.children}</ol>}
               ActiveLinkComponent={(props) => <li className="active" >{props.children}</li>}
               LinkComponent={(props) => <li>{props.children}</li>} // Don't create link tag or <Link />. Component will wrapp props.children with <Link />
-              mappedRoutes={routes} />
+              mappedRoutes={routes}
+              routeMatcherRegex="([\w-]+)" />
       </Router>
     );
   }
@@ -140,6 +141,7 @@ class App extends Component {
 | `ActiveLinkComponent` | function | Function responsible for creating active link html structure. Expected signature: `(props) => <JSX>{props.children}</JSX> PropTypes.func` |
 | `LinkComponent` | function | Function responsible for creating link html structure. Expected signature: `(props) => <JSX>{props.children}</JSX> PropTypes.func` |
 | `rootName` | string &#124; function | If set, root breadcrumb will always be displayed with given caption.<br/>If function is provided, it's resolved at display time, as with any other breadcrumbs, but it receives a full location path as `url` and `null` as `match`<br/>Empty string, `false` or `null` will hide it  (**default**) |
+| `routeMatcherRegex` | string | Customize routeMatcher by regular expression. <br/>e.g. If you want to accept the pipe character "&#124;", you can pass in <code>"([\\w-&#124;]+)"</code> <br/> By default routeMatcherRegex is set to `'([\\w-]+)'`
 
 
 

dist/BreadcrumbsItem.js

@@ -28,14 +28,15 @@ var BreadcrumbsItem = function BreadcrumbsItem(props) {
       mappedRoutes = props.mappedRoutes;
   var _props$parentProps = props.parentProps,
       ActiveLinkComponent = _props$parentProps.ActiveLinkComponent,
-      LinkComponent = _props$parentProps.LinkComponent;
+      LinkComponent = _props$parentProps.LinkComponent,
+      routeMatcherRegex = _props$parentProps.routeMatcherRegex;
 
   var placeholderMatcher = /:[^\s/]+/g;
 
   var getPlaceholderVars = function getPlaceholderVars(url, key) {
     var placeholders = key.match(placeholderMatcher);
     if (!placeholders) return null;
-    var routeMatcher = new RegExp('^' + key.replace(placeholderMatcher, '([\\w-]+)') + '$');
+    var routeMatcher = new RegExp('^' + key.replace(placeholderMatcher, routeMatcherRegex || '([\\w-]+)') + '$');
     var match = url.match(routeMatcher);
     if (!match) return null;
     return placeholders.reduce(function (memo, placeholder, index, array) {

dist/index.js

@@ -30,7 +30,8 @@ var BreadcrumbsWrapper = function BreadcrumbsWrapper(props) {
         WrapperComponent: props.WrapperComponent,
         ActiveLinkComponent: props.ActiveLinkComponent,
         LinkComponent: props.LinkComponent,
-        rootName: props.rootName
+        rootName: props.rootName,
+        routeMatcherRegex: props.routeMatcherRegex
       }, rest));
     }
   });
@@ -66,7 +67,8 @@ BreadcrumbsWrapper.propTypes = {
   WrapperComponent: _propTypes2.default.func,
   ActiveLinkComponent: _propTypes2.default.func,
   LinkComponent: _propTypes2.default.func,
-  rootName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func])
+  rootName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
+  routeMatcherRegex: _propTypes2.default.string
 };
 
 exports.default = BreadcrumbsWrapper;

src/BreadcrumbsItem.js

@@ -5,14 +5,14 @@ import PropTypes from 'prop-types';
 export const isDefined = v => (v !== undefined && v !== null && v !== false && String(v).length > 0);
 const BreadcrumbsItem = (props) => {
   const {match, name, mappedRoutes} = props;
-  const {ActiveLinkComponent, LinkComponent} = props.parentProps;
+  const {ActiveLinkComponent, LinkComponent, routeMatcherRegex} = props.parentProps;
   const placeholderMatcher = /:[^\s/]+/g;
 
   const getPlaceholderVars = (url, key) => {
     const placeholders = key.match(placeholderMatcher);
     if (!placeholders)
       return null;
-    const routeMatcher = new RegExp('^' + key.replace(placeholderMatcher, '([\\w-]+)') + '$');
+    const routeMatcher = new RegExp('^' + key.replace(placeholderMatcher, routeMatcherRegex || '([\\w-]+)') + '$');
     const match = url.match(routeMatcher);
     if (!match)
       return null;
@@ -95,4 +95,5 @@ BreadcrumbsItem.propTypes = {
   parentProps: PropTypes.shape({}).isRequired,
 };
 
+
 export default BreadcrumbsItem;

src/index.js

@@ -12,6 +12,7 @@ const BreadcrumbsWrapper = (props) => {
              ActiveLinkComponent={props.ActiveLinkComponent}
              LinkComponent={props.LinkComponent}
              rootName={props.rootName}
+             routeMatcherRegex={props.routeMatcherRegex}
              {...rest}
            />}
     />
@@ -31,7 +32,8 @@ BreadcrumbsWrapper.propTypes = {
   WrapperComponent: PropTypes.func,
   ActiveLinkComponent: PropTypes.func,
   LinkComponent: PropTypes.func,
-  rootName: PropTypes.oneOfType([PropTypes.string,PropTypes.func])
+  rootName: PropTypes.oneOfType([PropTypes.string,PropTypes.func]),
+  routeMatcherRegex: PropTypes.string,
 };
 
 export default BreadcrumbsWrapper;