10 examples of 'react router useparams typescript' in JavaScript

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
}

38
function useParams(initialParams = {}, debounceWait = 500) {
39
  const [params, setParams] = useState(initialParams);
40
  const [isStale, setIsStale] = useState(false);
41
42
  function updateParams(updatedParams) {
43
    const newParams = { ...params, ...updatedParams };
44
    setParams(newParams);
45
  }
46
47
  const debouncedSetParams = useMemo(
48
    () =>
49
      debounce(newParams => {
50
        setIsStale(false);
51
        setParams(newParams);
52
      }, debounceWait),
53
    []
54
  );
55
56
  return {
57
    params,
58
    isStale,
59
    setParams,
60
    debouncedSetParams: newParams => {
61
      setIsStale(true);
62
      debouncedSetParams(newParams);
63
    },
64
    updateParams,
65
    debouncedUpdateParams: updatedParams => {
66
      setIsStale(true);
67
      debouncedSetParams({ ...params, ...updatedParams });
68
    }
69
  };
70
}

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
}

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
}

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

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
}

71
route(route, params) {
72
  if (this.previousRoute === route) {
73
    return;
74
  }
75
  if (this.previousRoute) {
76
    this.previousRoute.shadowRoot.innerHTML = '';
77
  }
78
  if (route.page.prototype instanceof HTMLElement) {
79
    const page = getName(define(route.page));
80
    this.shadowRoot.innerHTML = `<${page}></${page}>`;
81
  } else if (route.page[0] === '<') {
82
    this.shadowRoot.innerHTML = route.page;
83
  } else {
84
    this.shadowRoot.innerHTML = `<${route.page}></${route.page}>`;
85
  }
86
  if (this.shadowRoot.firstElementChild) {
87
    Object.assign(this.shadowRoot.firstElementChild, params);
88
  }
89
  this.previousRoute = route;
90
}

4
export function useReactRouterQueryStringInterface(): QueryStringInterface | undefined {
5
  const router = useRouter()
6
  const history = router && router.history
7
8
  if (!history) {
9
    console.warn('useRouter - router was not found')
10
    return
11
  }
12
13
  return {
14
    getQueryString: () => history.location.search,
15
    setQueryString: (newQueryString, { method = 'replace' }) => {
16
      history[method](`${history.location.pathname}?${newQueryString}${history.location.hash}`)
17
    },
18
  }
19
}

65
function Router(props, context) {
66
  _classCallCheck(this, Router);
67
68
  _React$Component.call(this, props, context);
69
70
  this.state = {
71
    location: null,
72
    routes: null,
73
    params: null,
74
    components: null
75
  };
76
}