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
this disclaimer
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}
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

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 <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}
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 <StaticRouter location={location} context={context}>
75 {children}
76 </StaticRouter>
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(<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}
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 {...this.props} {...props}/>
37 );
38 }
39 }
40 return null;
41}

Related snippets