File tree Expand file tree Collapse file tree 1 file changed +45
-10
lines changed
src/routes/solid-router/reference/primitives Expand file tree Collapse file tree 1 file changed +45
-10
lines changed Original file line number Diff line number Diff line change 99 - pending
1010 - state
1111 - ui
12- version : ' 1.0'
12+ version : " 1.0"
1313description : >-
1414 Track route transitions with useIsRouting - display loading states, pending
1515 UI, and transition feedback during navigation in SolidJS.
1616---
1717
18- Retrieves a signal that indicates whether the route is currently in a transition.
19- This is useful for showing a stale or pending state when the route resolution is suspended state during concurrent rendering.
18+ The ` useIsRouting ` function is a utility for detecting when the router is processing a route transition.
2019
21- ``` js
22- const isRouting = useIsRouting ();
20+ ## Import
2321
24- return (
25- < div classList= {{ " grey-out" : isRouting () }}>
26- < MyAwesomeContent / >
27- < / div>
28- );
22+ ``` ts
23+ import { useIsRouting } from " @solidjs/router" ;
2924```
25+
26+ ## Type
27+
28+ ``` ts
29+ const useIsRouting: () => () => boolean ;
30+ ```
31+
32+ ## Parameters
33+
34+ None.
35+
36+ ## Return value
37+
38+ ** Type:** ` () => boolean `
39+
40+ An accessor function that returns ` true ` during route transitions and ` false ` otherwise.
41+
42+ ## Examples
43+
44+ ### Route transition indicator
45+
46+ ``` tsx
47+ import { useIsRouting } from " @solidjs/router" ;
48+
49+ function App() {
50+ const isRouting = useIsRouting ();
51+
52+ return (
53+ <>
54+ { isRouting () && <div class = " loading-bar" />}
55+ <MyContent />
56+ </>
57+ );
58+ }
59+ ```
60+
61+ ## Related
62+
63+ - [ ` <Router> ` ] ( /solid-router/reference/components/router )
64+ - [ ` useNavigate ` ] ( /solid-router/reference/primitives/use-navigate )
You can’t perform that action at this time.
0 commit comments