Make a non-accessible parent route in React Router

Question

I'm building a React app where I have a page with tabs that display different content, so my router looks like this:

<Route path="/" name="home" handler={App}>
    <DefaultRoute handler={Home}/>
    <Route path="tabs" handler={Tabs}>
        <Route path="tab1" name="tab1" handler={Tab1}/>
        <Route path="tab2" name="tab2" handler={Tab2}/>
    </Route>
</Route>

This produces the following routes:

/
/tabs
/tabs/tab1
/tabs/tab2

I would like to keep the same behavior but producing the following ones (and ONLY those):

/
/tab1
/tab2

Any idea how to accomplish this?

Answer 1

Here is a jsfiddle demonstrating it working.

<Route name="root" path="/" handler={App}>
    <DefaultRoute handler={Home} />
    <Route name="tabs" path="tab1" handler={Tabs}>
        <DefaultRoute name="tab1" handler={Tab1} />
        <Route name="tab2" path="/tab2" handler={Tab2} />
    </Route>
</Route>