I have setup a url for the Dashboard page at the NavigationContainer level, it contains an optional :id param.
const linking = { prefixes: ['https://localhost:19006'], config: { screens: { Dashboard: '/dashboard/:id?', }, },};My Drawer looks like this:
export function Dashboard() { const route = useRoute(); const {height} = useWindowDimensions(); const {days, fetchPage} = useDays(); const initialRouteName = useMemo(() => { if (route?.params && route?.params['id']) return route?.params['id']; return days.length ? days[0].id : 'loading...'; }, [route.params, days]); return (<View style={{height: height - 65}}><Drawer.Navigator {...{ drawerContent: props => <ContentComponent {...{...props, fetchPage}} />, drawerType: 'permanent', openByDefault: true, // drawerStyle: {width: '100%'}, initialRouteName, }}> {!days.length ? (<Drawer.Screen name={initialRouteName} component={View} /> ) : ( days.map(day => (<Drawer.Screen key={day.id} name={day.id} initialParams={{id: day.id}} component={Day} /> )) )}</Drawer.Navigator></View> );}The content of the drawer is being fetched. Everything works as expected to a point. You can load the page, and the default initialRoute is being set, and the url changes. I can click on the different drawer items. But what fails is when I refresh. The url :id duplicates, then when I refresh again, because there's no route for /dashboard/:id/:id it falls back to the home page.
How can I stop this doubling up, and have it so when I refresh the page it stays with the current :id?
Here's a gif:
