10 examples of 'usehistory react router v6' 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
}

5
export function useHistory() {
6
    let pathname = getPathname();
7
    let [state, setState] = useState({ pathname });
8
9
    useEffect(() => {
10
        function handler() {
11
            let pathname = getPathname();
12
            setState(state =>
13
                state.pathname != pathname ? { pathname } : state
14
            );
15
        }
16
        return subscribe(handler);
17
    }, []);
18
    return [pathname, redirect];
19
}

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
}

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
}

23
export function History(props: HistoryProps) {
24
  React.useEffect(() => {
25
    if (process.env.NODE_ENV !== 'production') {
26
      console.warn(
27
        `Deprecation Warning: "<History>" is deprecated. It will be removed in a future version.`,
28
      )
29
    }
30
  }, [])
31
32
  return (
33
    <NaviContext.Consumer>
34
      {context => props.children(context.navigation._history)}
35
    </NaviContext.Consumer>
36
  )
37
}

31
export function useHistory<TParams extends Record<string, unknown>>({
32
  pushOn,
33
}: {
34
  pushOn: TParams
35
}): void {
36
  const isMounted = useRef(false)
37
38
  useEffect(() => {
39
    if (!isMounted.current) {
40
      isMounted.current = true
41
      return
42
    }
43
44
    pushState(removeEmpty(pushOn))
45
  }, [JSON.stringify(pushOn)])
46
}

5
export function useHistory() {
6
  if (process.env.NODE_ENV !== 'production') {
7
    console.warn(
8
      `Deprecation Warning: "useHistory()" is deprecated. It will be removed in a future version.`,
9
    )
10
  }
11
12
  return React.useContext(NaviContext).navigation._history
13
}

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
}

12
function useHistory() {
13
	return useContext( Context );
14
}