Routing and navigation for React Native and Web apps. Maintained by @satya164
- Tweets 593
- Following 9
- Followers 11,092
- Likes 531
![| Pattern grammar | React Navigation | Expo Router | Next.js | TanStack Router | React Router |
| ------------------- | ---------------- | --------------- | ---------------- | --------------- | ------------ |
| Static | β
`users` | β
`users` | β
`users` | β
`users` | β
`users` |
| Optional static | β | β | β | β | β
`edit?` |
| Required param | β
`:id` | β
`[id]` | β
`[id]` | β
`$id` | β
`:id` |
| Optional param | β
`:id?` | β | β | β
`{-$id}` | β
`:id?` |
| Repeatable param 1+ | β
`:rest+` | β
`[...rest]` | β
`[...rest]` | β | β |
| Repeatable param 0+ | β
`:rest*` | β | β
`[[...rest]]` | β | β |
| Unmatched/Catch-all | β
`*` | β
`+not-found` | β
`not-found` | β
`$` | β
`*` |
| Regex](/pic/orig/media%2FHQfc28WWIAAUCCK.jpg)
ALT | Pattern grammar | React Navigation | Expo Router | Next.js | TanStack Router | React Router | | ------------------- | ---------------- | --------------- | ---------------- | --------------- | ------------ | | Static | β `users` | β `users` | β `users` | β `users` | β `users` | | Optional static | β | β | β | β | β `edit?` | | Required param | β `:id` | β `[id]` | β `[id]` | β `$id` | β `:id` | | Optional param | β `:id?` | β | β | β `{-$id}` | β `:id?` | | Repeatable param 1+ | β `:rest+` | β `[...rest]` | β `[...rest]` | β | β | | Repeatable param 0+ | β `:rest*` | β | β `[[...rest]]` | β | β | | Unmatched/Catch-all | β `*` | β `+not-found` | β `not-found` | β `$` | β `*` | | Regex
ALT // Matches /files/a and /files/a/b 'files/:parts+' // Matches /files, /files/a and /files/a/b 'files/:parts*'
![const never = new Promise(() => {});
function SuspendForever() {
use(never);
return null;
}
function LazyLayout({ children }) {
const navigation = useNavigation();
const [hasFocused, setHasFocused] = useState(() => navigation.isFocused());
useEffect(() => {
const unsubscribe = navigation.addListener('focus', () => {
setHasFocused(true);
});
if (navigation.isFocused()) {
setHasFocused(true);
}
return unsubscribe;
}, [navigation]);
return (
<Suspense fallback={<LoadingPlaceholder />}>
{hasFocused ? children : <SuspendForever />}
</Suspense>
);
}
const MyTabs = createBottomTabNavigator({
screenLayout: ({ children }) => <LazyLayout>{children}</LazyLayout>,
screens: {
// ...
},
});](/pic/orig/media%2FHObtxaHWgAAkKpX.jpg)
ALT const never = new Promise(() => {}); function SuspendForever() { use(never); return null; } function LazyLayout({ children }) { const navigation = useNavigation(); const [hasFocused, setHasFocused] = useState(() => navigation.isFocused()); useEffect(() => { const unsubscribe = navigation.addListener('focus', () => { setHasFocused(true); }); if (navigation.isFocused()) { setHasFocused(true); } return unsubscribe; }, [navigation]); return ( <Suspense fallback={<LoadingPlaceholder />}> {hasFocused ? children : <SuspendForever />} </Suspense> ); } const MyTabs = createBottomTabNavigator({ screenLayout: ({ children }) => <LazyLayout>{children}</LazyLayout>, screens: { // ... }, });
