10 examples of 'react router dom npm' in JavaScript

25
function mountWithRouter (node) {
26
27
  // Instantiate router context
28
  const router = {
29
    history: new BrowserRouter().history,
30
    route: {
31
      location: {},
32
      match: {},
33
    },
34
  }
35
36
  const createContext = () => ({
37
    context: { router, t: () => {} },
38
    childContextTypes: { router: shape({}), t: () => {} },
39
  })
40
41
  return mount(node, createContext())
42
}

8
export function Router({children, ...props}) {
9
  assert(props.location, 'Router "location" property is missing')
10
11
  const routes = useMemo(() => addRoutes(children), [])
12
  return renderMatch(routes, props)
13
}

178
ReduxibleRouter.prototype.getRouterWithDevTools = function getRouterWithDevTools() {
179
  var DevTools = this.devTools;
180
  return _react2.default.createElement(
181
    'div',
182
    null,
183
    this.getRouter(),
184
    ' ',
185
    _react2.default.createElement(DevTools, null)
186
  );
187
};

10
export default function withNamedRouter(ChildComponent) {
11
  return function NamedRouter(props) {
12
    const routerValue = useContext(RouterContext)
13
    const namedRoutes = useContext(RouterConfigContext)
14
    const history = useMemo(() => namedHistory(routerValue.history, namedRoutes), [routerValue])
15
    return (
16
      <ChildComponent
17
        {...props}
18
        history={history}
19
        location={routerValue.location}
20
        match={routerValue.match}
21
      />
22
    )
23
  }
24
}

11
function withRouter(Component) {
12
  const displayName = `withRouter(${Component.displayName || Component.name})`;
13
  const C = props => {
14
    const { wrappedComponentRef, ...remainingProps } = props;
15
16
    return (
17
      <RouterContext.Consumer>
18
        {context => {
19
          invariant(
20
            context,
21
            `You should not use <${displayName} /> outside a <Router>`
22
          );
23
          return (
24
            <Component
25
              {...remainingProps}
26
              {...context}
27
              ref={wrappedComponentRef}
28
            />
29
          );
30
        }}
31
      </RouterContext.Consumer>
32
    );
33
  };
34
35
  C.displayName = displayName;
36
  C.WrappedComponent = Component;
37
38
  if (__DEV__) {
39
    C.propTypes = {
40
      wrappedComponentRef: PropTypes.oneOfType([
41
        PropTypes.string,
42
        PropTypes.func,
43
        PropTypes.object
44
      ])
45
    };
46
  }
47
48
  return hoistStatics(C, Component);
49
}

14
export default function withRouter(WrappedComponent, options) {
15
  var withRef = options && options.withRef;
16
17
  var WithRouter = createReactClass({
18
    displayName: 'WithRouter',
19
20
    mixins: [ContextSubscriber('router')],
21
22
    contextTypes: { router: routerShape },
23
    propTypes: { router: routerShape },
24
25
    getWrappedInstance: function getWrappedInstance() {
26
      !withRef ? process.env.NODE_ENV !== 'production' ? invariant(false, 'To access the wrapped instance, you need to specify ' + '`{ withRef: true }` as the second argument of the withRouter() call.') : invariant(false) : void 0;
27
28
      return this.wrappedInstance;
29
    },
30
    render: function render() {
31
      var _this = this;
32
33
      var router = this.props.router || this.context.router;
34
      if (!router) {
35
        return React.createElement(WrappedComponent, this.props);
36
      }
37
38
      var params = router.params,
39
          location = router.location,
40
          routes = router.routes;
41
42
      var props = _extends({}, this.props, { router: router, params: params, location: location, routes: routes });
43
44
      if (withRef) {
45
        props.ref = function (c) {
46
          _this.wrappedInstance = c;
47
        };
48
      }
49
50
      return React.createElement(WrappedComponent, props);
51
    }
52
  });
53
54
  WithRouter.displayName = 'withRouter(' + getDisplayName(WrappedComponent) + ')';
55
  WithRouter.WrappedComponent = WrappedComponent;
56
57
  return hoistStatics(WithRouter, WrappedComponent);
58
}

7
export function Router({ children }) {
8
	let [pathname] = useHistory();
9
	let nextChild;
10
	let nextParams;
11
12
	children = useMemo(() => toList(children), [children]);
13
14
	let length = children.length;
15
16
	for (let i = 0; i < length; i++) {
17
		let child = children[i];
18
		let props = child.props;
19
		if (props.path) {
20
			let [inRoute, params] = match(child.props.path, pathname);
21
			if (inRoute) {
22
				nextChild = child;
23
				nextParams = params;
24
				break;
25
			}
26
		}
27
		if (child.props.default) {
28
			nextChild = child;
29
		}
30
	}
31
32
	if (nextChild) {
33
		let { type, props } = nextChild;
34
		let nextProps = { ...props, params: nextParams };
35
		delete nextProps.path;
36
		delete nextProps.default;
37
		return createElement(type, nextProps);
38
	}
39
}

65
function Router(props, context) {
66
  _classCallCheck(this, Router);
67
68
  _React$Component.call(this, props, context);
69
70
  this.state = {
71
    location: null,
72
    routes: null,
73
    params: null,
74
    components: null
75
  };
76
}

17
export function createRouteFromReactElement(element) {
18
  var type = element.type;
19
  var route = createRoute(type.defaultProps, element.props);
20
21
  if (route.children) {
22
    var childRoutes = createRoutesFromReactChildren(route.children, route);
23
24
    if (childRoutes.length) route.childRoutes = childRoutes;
25
26
    delete route.children;
27
  }
28
29
  return route;
30
}

17
render() {
18
  const {children} = this.props;
19
  // No children means nothing to render.
20
  if (!children) return null;
21
22
  // That makes nested routes working.
23
  const propsForChildren = {...this.props};
24
  delete propsForChildren.children;
25
26
  // Delete route to prevent overwrite of correct value.
27
  delete propsForChildren.route;
28
29
  return React.cloneElement(children, propsForChildren);
30
}