a complex case with react-router may better solved with "state based router" - angular-ui-router

Question

I'm looking for a better solution for my special menu case.
Here's the case:
Let's say we have 6 pages:
A
B
C
C1
C2
C3
Here's how the menu changed when we go from page:C to page:C1
The Design is that C1/2/3 are all submenus, when we access these pages, the menu should display C1/2/3 with a return button.
Here's the requirements:
the Menu component should be reusable
the Menu component should automatic determine to show submenus(C1/2/3) with a return button or just ordinary menus.
then I wrote a Menu component...
It's usage:
/* Routes */
<Route path="A" ... />
<Route path="B" ... />
<Route path="C" ... />
<Route path="C/:Id">
<Route path="C1" />
<Route path="C2" />
<Route path="C3" />
</Route>
/* Menus */
<Menu {...this.props}>
<Item path="A">A</Item>
<Item path="B">B</Item>
<Item path="C">C</Item>
<SubMenu path="C/:Id">
<Item path="C1">C1</Item>
<Item path="C2">C2</Item>
<Item path="C3">C3</Item>
</SubMenu>
<Menu>
I use the "path" to match and highlight Item, this can be done by using react-router's routes props. But it is not done yet, next I need to add links:
/* Menus */
<Menu {...this.props}>
<Item path="A">
<Link to="A">A</Link>
</Item>
<Item path="B">
<Link to="B">B</Link>
</Item>
<Item path="C">
<Link to="C">C</Link>
</Item>
<SubMenu path="C/:Id">
<Item path="C1">
<XLink to="C/:Id/C1">C1</XLink>
</Item>
<Item path="C2">
<XLink to="C/:Id/C2">C2</XLink>
</Item>
<Item path="C3">
<XLink to="C/:Id/C3">C3</XLink>
</Item>
</SubMenu>
<Menu>
Because path "C/:Id" need an id, I need to automatic generate the url.
What I did is creating a XLink component which take routeParams to generate the real url we need link to.
For example, when we access C/00001/C1，we can get the routeParams: {Id: "00001"}，and then we click <XLink to="C/:Id/C3">C3</XLink> it will replace :Id with "00001". Btw, XLink should support custom function to manually process the url.
Seems like problem solved but it's not good enough. Any good ideas ?
Since I came from an angular background, I think this case may be better solved by ui-router because it is based on "states", not url. The code may looks like this:
/* Menus */
<Menu {...this.props}>
...
<SubMenu state="C.detail">
<Item state="C.detail.C1">
<Link to="C.detail.C1">C1</Link>
</Item>
<Item state="C.detail.C2">
<Link to="C.detail.C2">C2</Link>
</Item>
<Item state="C.detail.C3">
<Link to="C.detail.C3">C3</Link>
</Item>
</SubMenu>
<Menu>
I don't have to process the route params，and I could use state for both highlight and linking.
I'm quite new to react-router, if I made terrible mistakes, pls tell me.