I am using react-router v3.0.0 with react v15.1.0. I have the following route setup:
ReactDom.render(<Provider store={store}>
<Router history={BrowserHistory}>
<Route path='shop' component={App}>
<IndexRoute component={Shop} />
<Route path='/product' component={ProductView} />
</Route>
</Router>
</Provider>, document.getElementById('app'));
As you can see, my base Route
for the application has a path of 'shop'
. As far as the user is concerned, this should result in 2 separate routes, http://example.com/shop
and http://example.com/shop/product
. However, this is not the case.
When I deploy the aforementioned code, http://example.com/shop
renders correctly, but http://example.com/shop/product
renders nothing. In fact, I get a console error:
Warning: [react-router] Location "/shop/product" did not match any routes
So, I altered my setup a bit:
ReactDom.render(<Provider store={store}>
<Router history={BrowserHistory}>
<Route path='shop/' component={App}>
<IndexRoute component={Shop} />
<Route path='product' component={ProductView} />
</Route>
</Router>
</Provider>, document.getElementById('app'));
This will allow me to render http://example.com/shop/
(notice the trailing forward slash), http://example.com/shop/product
, but NOT http://example.com/shop
.
Is is possible to render http://example.com/shop
, http://example.com/shop/
, http://example.com/shop/product
within the same app?
The reason that your first setup failed is because React Router
<Route>
path
s that begin with a slash are considered absolute to the root (/
), even when they are nested.Your second setup is close, but you should not include the trailing slash in
shop/
. React Router will join the paths together for you, you do not need to worry about including a slash to joinshop
andproduct
. (For example, look at this configuration which uses relative paths)