10 examples of 'react router dom v5' in JavaScript

Every line of 'react router dom v5' 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
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}
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}
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}
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
17 )
18 }
19}
11function withRouter(Component) {
12 const displayName = `withRouter(${Component.displayName || Component.name})`;
13 const C = props => {
14 const { wrappedComponentRef, ...remainingProps } = props;
15
16 return (
17
18 {context => {
19 invariant(
20 context,
21 `You should not use <${displayName} /> outside a `
22 );
23 return (
24
25 );
26 }}
27
28 );
29 };
30
31 C.displayName = displayName;
32 C.WrappedComponent = Component;
33
34 if (__DEV__) {
35 C.propTypes = {
36 wrappedComponentRef: PropTypes.oneOfType([
37 PropTypes.string,
38 PropTypes.func,
39 PropTypes.object
40 ])
41 };
42 }
43
44 return hoistStatics(C, Component);
45}
48public render() {
49 return this._resolveRoute();
50}
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}
72export function renderRouterSnapshot(children, location = '/', context = {}) {
73 return render(
74
75 {children}
76
77 );
78}
28function renderRoute(routerState, transition) {
29 const redux = createRedux(dispatcher, {});
30 var bundleScriptSrc = 'assets/bundle.js';
31 var appScriptSrc = config.isProduction ? bundleScriptSrc : `${config.webpackDevUrl}/${bundleScriptSrc}`;
32 return Promise.all(RouteToInitialData(redux, routerState))
33 .then(()=> {
34 var appHtml = React.renderToString();
35 var scriptsHtml = `
36
37
38 `;
39 var title = 'A Title';
40 return buildHtmlPage(scriptsHtml, appHtml, title);
41 });
42}
26RouterRender(props) {
27 switch (this.props.store.state) {
28 case 'loading': {
29 return ('Loading...');
30 }
31 case 'error': {
32 return ('Error');
33 }
34 case 'ready': {
35 return (
36 <main>
37 );
38 }
39 }
40 return null;
41}</main>

Related snippets