Btukfyl

I'm very much new to react and i'm testing a tabs layout here: https://codesandbox.io/s/lpjlqo7n4z where i have 2 navigations, a Home and About which renders different contents. Inside the Homepage there's 2 more inner navigation links with different routes. Now my question is how to automatically render the component of the first tablink inside the homepage just below the inner navigation?

Assuming everything is imported properly, here's my Index.js code:

  <Router>

    <div className="App">

      <header>

        <div className="logo">

          <figure>

            <p>Logo</p>

          </figure>

        </div>

        <nav>

         <ul>

           <li>

             <Link to="/" exact>Home</Link>

           </li>

           <li>

             <Link to="/about" exact>About</Link>

           </li>

         </ul>

        </nav>

      </header>

      <main>

        <Switch>

          <Route exact path="/" render={props => <Home {...props}/>} />

          <Route exact path="/about" render={props => <About {...props} />} />

        </Switch>

      </main>

    </div>

  </Router>

Home component:

const Home = (props) => {

  return (

    <div className="page">

      <div className="page-header">

        <h1>Homepage</h1>

      </div>

      <div className="page-nav">

        <ul>

          <li>

            <Link to={`/graphics-design`}>Graphics Design</Link>

          </li>

          <li>

            <Link to={`/development`}>Development</Link>

          </li>

        </ul>

      </div>

      <div className="page-content">

        <Switch>

          <Route path={`${match}/:topicId`} render={props => <DesignTab />} />

          <Route

            path={`${match}/:topicId`}

            render={props => <DevelopmentTab />}

          />

        </Switch>

      </div>

    </div>

  );

};



export default Home;

And the first tab component:

const DesignTab = props => {

  return (

    <div className="tab-content">

      <div className="tab-header">

        <h1>Design Works</h1>

      </div>

      <div className="tab-details">

        <p>

          <span>

            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur

            dignissimos corrupti eius vero maxime architecto similique odio

            maiores nihil accusantium iure error et voluptate placeat excepturi

            blanditiis, ad numquam itaque.

          </span>

        </p>

      </div>

    </div>

  );

};



export default DesignTab;

How do i automatically render the tab content just below the inner navigation of the homepage?

Please see the layout here: https://codesandbox.io/s/lpjlqo7n4z

There are issues with your program you need to address before starting your problem:

The tab content just below the inner navigation of the homepage is impossible to render because the path is impossible to reach. You basically saying "Once im in the / home path, i want to match /gaming/:topicId paths" but this isn't possible because the only way to get to your Home component is to exactly match / in your index. So you can't exactly match / as well as /gaming/topicId.

I would recommend moving these routes to your index.js file:

<Switch>

  <Route path={`${match}/:topicId`} render={props => <DesignTab />} />

  <Route

    path={`${match}/:topicId`}

    render={props => <DevelopmentTab />}

  />

</Switch>

I don't understand what you want this Route to match to because the match object doesn't make sense in this context.

When you make statements like render={props => <Home />, the props are not being sent to your Home component. You must tell the component you want to send it props via render={props => <Home {...props} /> instead.

Also const Home = (props, { match }) is not the correct syntax and match will always be undefined here. Change to const Home = (props) then you can access match via props.match.

I hope my advice helps :)