After reading the meteor chef’s great article (here), I see that he has routes setup like this:
const App = appProps => (
<Router>
<div className="App">
<AppNavigation {...appProps} />
<Grid>
<Switch>
<Route exact name="index" path="/" component={Index} />
<Authenticated exact path="/documents" component={Documents} {...appProps} />
<Authenticated exact path="/documents/new" component={NewDocument} {...appProps} />
<Authenticated exact path="/documents/:_id" component={ViewDocument} {...appProps} />
<Authenticated exact path="/documents/:_id/edit" component={EditDocument} {...appProps} />
<Public path="/signup" component={Signup} {...appProps} />
<Public path="/login" component={Login} {...appProps} />
<Route name="recover-password" path="/recover-password" component={RecoverPassword} />
<Route name="reset-password" path="/reset-password/:token" component={ResetPassword} />
<Route component={NotFound} />
</Switch>
</Grid>
</div>
</Router>
);
The above is great when you have the same header/navgiation/layout for the admin and public area. In the case where your admin panel is a completely different layout/container (a dashboard) than your public app (a normal webpage with header up top), is the below psuedo code how you would setup with v4?
const Authenticated = appProps => (
<Router>
<div class='admin-dashboard-layout'>
<AdminDashboardNav />
<Switch>
<Route exact name="index" path="/" component={Index} />
<Authenticated exact path="/documents" component={Documents} {...appProps} />
<Authenticated exact path="/documents/new" component={NewDocument} {...appProps} />
<Authenticated exact path="/documents/:_id" component={ViewDocument} {...appProps} />
<Authenticated exact path="/documents/:_id/edit" component={EditDocument} {...appProps} />
<Route component={NotFound} />
</Switch>
</div>
</Router>
);
const Public = appProps => (
<Router>
<div class='public-layout'>
<PublicHeaderNav />
<Switch>
<Public exact path="/documents" component={Documents} {...appProps} />
<Public exact path="/documents/new" component={NewDocument} {...appProps} />
<Public exact path="/documents/:_id" component={ViewDocument} {...appProps} />
<Public exact path="/documents/:_id/edit" component={EditDocument} {...appProps} />
<Route component={NotFound} />
</Switch>
</div>
</Router>
);
const App = appProps => (
<Router>
<Switch>
<Route exact name="index" path="/" component={Index} />
<Route exact path="/admin" component={Authenticated} {...appProps} />
<Route path="/public" component={Public} {...appProps} />
<Route component={NotFound} />
</Switch>
</Router>
);