0

I'm trying to use Nested Routes but it gives me following error:

error message

Here is my routes code. I'm getting error when I try to use nested routes for Manufacturers. 

import React from 'react';
import {Router, IndexRoute, Route, hashHistory} from 'react-router';
import {
    App,
    Home,
    ManufacturerDetails,
    ManufacturerList,
  } from 'containers';

export default () => {
  return (
    <Router history={hashHistory}>
      <Route path="/" name="Home" component={App} >

        <IndexRoute component={Home}/>

        <Route name="Manufacturers" path="Manufacturers" component={ManufacturerList}>
          <Route name="Manufacturer Details" path="/:manufacturer" component={ManufacturerDetails} />
        </Route>

      </Route>
    </Router>
  );
};
Muhammad Ateeq Azam
  • 1,009
  • 1
  • 12
  • 26

2 Answers2

1

I've tried to simulate your situation, then I get the same error:

1st attempt

Then I make the modification and it works:

<Route name="Manufacturers" path="Manufacturers" component={ManufacturerList}>
  <Route name="Manufacturer Details" path=":manufacturer" component={ManufacturerDetails}/>
</Route>

i.e. removing the leading / in /:manufacturer. And it works:

1st solve

And it should as there is an official test specifically for this route pattern matching.

Then I realise you are using hashHistory, which will insert a hash character in the address bar. Just be careful not to let the '#' mess with the route matching then it should be okay as well. (or use browserHistory as the official doc suggest, if possible.)

2nd solve

Conrad Lo
  • 116
  • 5
0

Try removing "/" part from the "Manufacturer Details" route.

<Route name="Manufacturer Details" path=":manufacturer" component={ManufacturerDetails} />

Edvinas daugirdas
  • 197
  • 1
  • 3