Master-Detail select a detail view by default

Questions
1

I’ve built a master-detail view with react and my routes look like this:

{
	theme: 'ios',
	name: 'Followups',
	id: 'tulip.followups',
	iosTranslucentBars: false,
	iosTranslucentModals: false,
	routes: [
		{
			path: '/',
			component: TypeListPage,
			master: true,
			detailRoutes: [
				{
					path: '/task-list/group/:groupName/type/:typeId',
					component: TaskListPage
				},
				{
					path: '/task-view/:task_id',
					component: TaskViewPage
				}
			]
		},
		{
			path: '/create',
			component: TaskCreatePage
		},
		{
			path: '/edit/:taskId',
			component: TaskEditPage
		}
	]
}

My master view contains a list of links and I would like to load a specific route into the detail view on load. I’m aware there isn’t any out of the box functionality for this but is there a way to hack around this with React?

2

If you mean to load master together with (default) detail, then you just need to set your View’s default URL to detail url instead of /, for example:

<View url="/task-list/1" />

It should load master and detail

3 
@inject('followupsStore')
@observer
export default class extends React.Component<Props> {

	get f7Params(): object {
		return (
			{
				theme: 'ios',
				name: 'Followups',
				id: 'tulip.followups',
				iosTranslucentBars: false,
				iosTranslucentModals: false,
				routes: [
					{
						path: '/',
						component: TypeListPage,
						master: true,
						detailRoutes: [
							{
								path: '/task-list/group/:groupName/type/:typeId',
								component: TaskListPage
							},
							{
								path: '/task-view/:task_id',
								component: TaskViewPage
							}
						]
					},
					{
						path: '/create',
						component: TaskCreatePage
					},
					{
						path: '/edit/:taskId',
						component: TaskEditPage
					}
				]
			}
		);
	}

	render() {
		return (
			<App params={ this.f7Params }>
				<View main pushState pushStateSeparator='#' masterDetailBreakpoint={769} url='/task-list/group/upcoming/type/3' />
			</App>
		);
	}
}

I’m still seeing the issue.

That’s my component and I changed the default url in View to /task-list/group/upcoming/type/3 like you said. That url is dynamic but I just hardcoded some values for now. The problem I see is that whenever I open the root route (/) in my browser, it ignores the url specified in View and only opens the TypeList component in the master component. I’m not sure if it’s a bug that <View ... url='/task-list/group/upcoming/type/3' /> is ignored?

4

Yes, with pushState enabled it will be ignored, that is the idea of pushState. You then do a check for current URL on app start and call router.navigate right after to detail route if it is a root / route