10 examples of 'react router useroutematch' in JavaScript

Every line of 'react router useroutematch' 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
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}
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

17function 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}
21function 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}
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}
9export 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 <HashRouter>
24 <Nav current={current} />
25 <Switch>
26 <Route exact path='/' component={Main} />
27 <Route path='/admin' component={Admin} />
28 <Route path='/profile' component={Profile} />
29 <Route component={Main} />
30 </Switch>
31 </HashRouter>
32 )
33}
6export 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}
27function 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}
175currentRoute () {
176 const routeData = Matcher.matchPath(this.routes, this.currentPath())
177 if (routeData) {
178 return routeData
179 } else {
180 return null
181 }
182}
3export 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}
19get match() {
20 return this.routeMatch;
21}

Related snippets