10 examples of 'react router useroutematch' in JavaScript

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
}

17
function useRoutes(createHistory) {
18
  warning(
19
    false,
20
    '`useRoutes` is deprecated. Please use `createTransitionManager` instead.'
21
  )
22
23
  return function ({ routes, ...options } = {}) {
24
    const history = useQueries(createHistory)(options)
25
    const transitionManager = createTransitionManager(history, routes)
26
    return { ...history, ...transitionManager }
27
  }
28
}

21
function useRoutes(createHistory) {
22
  process.env.NODE_ENV !== 'production' ? warning(false, '`useRoutes` is deprecated. Please use `createTransitionManager` instead.') : void 0;
23
24
  return function () {
25
    var _ref = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
26
27
    var routes = _ref.routes;
28
29
    var options = _objectWithoutProperties(_ref, ['routes']);
30
31
    var history = useQueries(createHistory)(options);
32
    var transitionManager = createTransitionManager(history, routes);
33
    return _extends({}, history, transitionManager);
34
  };
35
}

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
}

9
export default function Router() {
10
  const [current, setCurrent] = useState('home')
11
  useEffect(() => {
12
    setRoute()
13
    window.addEventListener('hashchange', setRoute)
14
    return () =>  window.removeEventListener('hashchange', setRoute)
15
  }, [])
16
  function setRoute() {
17
    const location = window.location.href.split('/')
18
    const pathname = location[location.length-1]
19
    console.log('pathname: ', pathname)
20
    setCurrent(pathname ? pathname : 'home')
21
  }
22
  return (
23
    
24
      <nav>
25
      
26
        
27
        
28
        
29
        
30
      
31
    </nav>
32
  )
33
}

6
export function useRoutes(routes) {
7
  const id = useState(Symbol())[0]
8
  const setter = useState(0)[1]
9
10
  let stack = {
11
    routes: Object.entries(routes),
12
    setter
13
  }
14
15
  routeStack[id] = stack
16
  perfrom(id, true)
17
18
  return typeof stack.component === 'string'
19
    ? push(stack.component)
20
    : stack.component(stack.props)
21
}

27
function useRoutes(routes) {
28
  const [rid] = fre.useState(Math.random().toString());
29
  const setter = fre.useState(0)[1];
30
  let stackObj = stack[rid];
31
32
  if (!stackObj) {
33
    stackObj = {
34
      routes: Object.entries(routes),
35
      setter
36
    };
37
    stack[rid] = stackObj;
38
    process(rid);
39
  }
40
41
  return typeof stackObj.component === 'function' ? stackObj.component(stackObj.props) : push(stackObj.component);
42
}

175
currentRoute () {
176
  const routeData = Matcher.matchPath(this.routes, this.currentPath())
177
  if (routeData) {
178
    return routeData
179
  } else {
180
    return null
181
  }
182
}

3
export function Router(props) {
4
	if (!props.children) return; // Error?
5
6
	if (!window.onpopstate) window.onpopstate = props.routeChanged;
7
8
	const match = props.children.find(matchRoute);
9
10
	if (match) {
11
		return match.view(props.model);
12
	} else {
13
		// Not Found?
14
	}
15
}

19
get match() {
20
  return this.routeMatch;
21
}