|
6 | 6 | */ |
7 | 7 |
|
8 | 8 | import type { PropsWithChildren } from 'react'; |
9 | | -import React, { memo, useEffect } from 'react'; |
| 9 | +import React, { memo, useEffect, useMemo } from 'react'; |
10 | 10 | import { useLocation } from 'react-router-dom'; |
11 | 11 | import { useDispatch } from 'react-redux'; |
12 | 12 | import { TimelineId } from '../../../../common/types'; |
13 | | -import type { AppLocation } from '../../../../common/endpoint/types'; |
14 | 13 | import { timelineActions } from '../../../timelines/store'; |
15 | 14 |
|
16 | 15 | /** |
17 | 16 | * This component should be used above all routes, but below the Provider. |
18 | 17 | * It dispatches actions when the URL is changed. |
19 | 18 | */ |
20 | 19 | export const RouteCapture = memo<PropsWithChildren<unknown>>(({ children }) => { |
21 | | - const location: AppLocation = useLocation(); |
| 20 | + const { pathname, search, hash, state } = useLocation(); |
22 | 21 | const dispatch = useDispatch(); |
| 22 | + const relevantUrlParams = useMemo( |
| 23 | + () => ({ pathname, search, hash, state }), |
| 24 | + [pathname, search, hash, state] |
| 25 | + ); |
23 | 26 |
|
24 | 27 | useEffect(() => { |
25 | 28 | dispatch(timelineActions.showTimeline({ id: TimelineId.active, show: false })); |
26 | | - }, [dispatch, location.pathname]); |
| 29 | + }, [dispatch, relevantUrlParams.pathname]); |
27 | 30 |
|
28 | 31 | useEffect(() => { |
29 | | - dispatch({ type: 'userChangedUrl', payload: location }); |
30 | | - }); |
| 32 | + dispatch({ type: 'userChangedUrl', payload: relevantUrlParams }); |
| 33 | + }, [dispatch, relevantUrlParams]); |
31 | 34 |
|
32 | 35 | return <>{children}</>; |
33 | 36 | }); |
|
0 commit comments