Nested Routing with url param is not working in react-router-dom

Question

I'm setting up nested routes within React-router-dom (v5.0.1), but it (route /primary/:id) is not working whenever I try and access one of the nested routes.

Nested route looks like..

const id = ({match}) =>  (
    <div>
        with id {match.params.id}
    </div>
)

const primary = ({match}) => (
    <div>
        This is the Primary route
        <br/>
        <Link to='/primary/one'>Primary with id</Link>
        <Route path='/primary/:id' component={id} />
    </div>
)

I cannot access the id component. I call the primary component in Routes component.

const Routes = () => {
    return(
        <Router>
            <Route exact path='/' component={main} />
            <Route exact path='/primary' component={primary} />    
        </Router>
    )
}

And Routes are called in App component as follows.

function App() {
  return (
    <div className="App">
      <Routes />
    </div>
  );
}

Pavindu · Accepted Answer · 2019-09-23 05:37:01Z

2

Define two Routes for primary and id components as follows.


const id = () =>  (
    <div>
        with id {props.id}
    </div>
)

const primary = () => (
    <div>
        This is the Primary route
        <br/>
        {
          props.match.params.id ? 
            <id id={props.match.params.id}/>
         : ""
        }

        <Link to='/primary/one'>Primary with id</Link>
    </div>
)

const Routes = () => {
    return(
        <Router>
            <Route exact path='/' component={main} /> 
            <Route exact path='/primary' component={primary} />
            <Route exact path='/primary/:id' component={id} />
        </Router>
    )
}

EDIT The below is not tested. Try if this works.

const primary = ({match}) => (
    <div>
        This is the Primary route
        <br/>
        <Link to='/primary/one'>Primary with id</Link>
        {<Route path='/primary/:id' component={id} />}
    </div>
)

edited Sep 23, 2019 at 5:37

answered Sep 22, 2019 at 16:34

Pavindu

3,1338 gold badges54 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sayeed Afridi Over a year ago

But i want ``` <Route exact path='/primary/:id' component={id} /> ``` this route inside primary component.. isn't that possible..?

Pavindu Over a year ago

Did you mean primary component works as a layout for each and every id component?

Sayeed Afridi Over a year ago

Since id component is accessed from primary component , I want that route inside primary component rather than in Routes or App component.. It seems that was working on earlier version of react-router-dom. I don't know why this isn't working now.

Sayeed Afridi Over a year ago

That's not working.. I think I have to declare primary route without path.. <Route component={primary} /> ... Now its working..

nash11 · Accepted Answer · 2019-09-23 05:56:16Z

0

You just put this code in your routes:

const Routes = () => {
    return(
        <Router>
            <Route exact path='/' component={main} />
            <Route exact path='/primary/:id' component={primary} />    
        </Router>
    )
}

edited Sep 23, 2019 at 5:56

nash11

8,7503 gold badges23 silver badges58 bronze badges

answered Sep 23, 2019 at 5:39

Dixit Savaliya

4133 silver badges7 bronze badges

Collectives™ on Stack Overflow

Nested Routing with url param is not working in react-router-dom

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related