10 examples of 'react router dom v5' in JavaScript

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
}

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
}

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
}

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
}

48
public render() {
49
  return this._resolveRoute();
50
}

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
}

72
export function renderRouterSnapshot(children, location = '/', context = {}) {
73
  return render(
74
    <StaticRouter location={location} context={context}>
75
      {children}
76
    </StaticRouter>
77
  );
78
}

28
function 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(<Root redux={redux} routerState={routerState} />);
35
			var scriptsHtml = `
36
		        <script src="${appScriptSrc}"></script>
37
		        <script>CommunityBoard(document.body, ${JSON.stringify(redux.getState())});</script>
38
            `;
39
			var title = 'A Title';
40
			return buildHtmlPage(scriptsHtml, appHtml, title);
41
		});
42
}

26
RouterRender(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 {...this.props} {...props}/>
37
      );
38
    }
39
  }
40
  return null;
41
}