CODEWITHSUNDEEP
reactjsreact-router
Adriano Todaro
Adriano Todaro

Reputation: 351

React Router: Route defined in child component not working

I'm working on a React web application using React router.

The Route objects defined on the main wrapper component are working just fine, but if I try to define a Route on a child component, any link pointing to it won't be able to render the desired component.

Here is a code snippet trying to explain the situation:

class MainWrapper extends Component {

render() {
        return (
                <div className="App">
                    <Switch>
                        <Route exact path="/a" component= {A}/>
                    </Switch>

                </div>
        );
    }
}


const A = () => {
   return (
      <div>
         <Route exact path="/b" component={B}/>
         <Link to="/b"/>
      </div>
   ) 
}


const B = () => {
   return (<div>HELLO</div>)
}

In my application, the link pointing to "/b" is not rendering the B component, like the component prop weren't passed

Why this won't work?

Upvotes: 2

Views: 3857

Answers (4)

Facundo Larrosa
Facundo Larrosa

Reputation: 3389

You are specifying "exact path" in both Routes, so for rendering B your path should be exactly "/b", but when linking to "/b" component A will unmount because for rendering A you must be on exact path "/a". You should change your approach. One would be removing "exact" and including "/a" to your Link:

class MainWrapper extends Component {

render() {
    return (
            <div className="App">
                <Switch>
                    <Route path="/a" component= {A}/>
                </Switch>

            </div>
    );
    }
}


const A = () => {
  return (
    <div>
       <Route path="/b" component={B}/>
       <Link to="/a/b"/>
    </div>
  ) 
}


const B = () => {
  return (<div>HELLO</div>)
}

Upvotes: 3

Adeel Imran
Adeel Imran

Reputation: 13986

You need to wrap it in a Switch, and you should remove the exact prop from your /b route.

const A = ({match}) => {
   return (
      <div>
        <Switch>
          <Route path={`${match.url}/b`} component={B}/>
        </Switch>
        <Link to="a/b"/>
      </div>
   ) 
}

Upvotes: 0

Olivier Boiss&#233;
Olivier Boiss&#233;

Reputation: 18173

if B is a child of A, the url should be /a/b instead of /b, so you just need to update the A component with this code 

const A = ({match}) => {
  return (
     <div>
        <Route exact path={`${match.url}/b`} component={B}/>
        <Link to=to={`${match.url}/b`}/>
     </div>
  ) 
};

See the documentation here

Upvotes: 1

Colin Ricardo
Colin Ricardo

Reputation: 17269

Do you have a Router somewhere? Also, you haven't closed your Link tag.

Upvotes: 0

Related Questions