10 examples of 'react router dom npm' in JavaScript

Every line of 'react router dom npm' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.

All examples are scanned by Snyk Code

By copying the Snyk Code Snippets you agree to
this disclaimer
25function 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}
Important

Use secure code every time

Secure your code as it's written. Use Snyk Code to scan source code in minutes – no build needed – and fix issues immediately. Enable Snyk Code

8export 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}
178ReduxibleRouter.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};
10export 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}
11function 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}
14export 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}
7export 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}
65function 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}
17export 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}
17render() {
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}

Related snippets