React routing setup for child component

Question

I just started learning to react, react-component and router. I able to make route on parent component but here is a scenario where I got stuck Please help.

https://prnt.sc/rkzbrp

As you can see in the image, there are three sections, Header, Sidebar and white space. In the sidebar, all the links are of component, on which I already made route. What I want is when someone clicks on the 'Profile' profile component get loaded in white space. The same thing happens when some one-click 'Deals'.

My Router

 <Router>
            <Switch>
                <Route path="/dashboard/" exact component={Dashboard} />
                <Route path="/dashboard/check-in" component={CheckIn} />
                <Route path="/dashboard/deals" component={Deals} />
                <Route path="/dashboard/events" component={Events} />
                <Route path="/dashboard/invoice" component={Invoice} />
                <Route path="/dashboard/notification" component={Notification} />
                <Route path="/dashboard/profile" component={Profile} />
                <Route path="/dashboard/redemption"  component={Redemptions} />
                <Route path="/dashboard/restriction-management" component={RestrictionManagement} />
            </Switch>
        </Router>

My Overall container

 <div className="row home-container">
               <Header />
               <div className="col-md-12 pd-0-0" style={style}>
                   <Sidebar />
               </div>
            </div>

Sidebar container

 <div className="col-md-2 col-sm-2 sidebar-container bg-black pd-0-0">
                <div className="row">
                    <div className="col-md-12 link-container">
                        <Link to="/dashboard" className="color-white roboto">Home</Link>                       
                    </div>
                    <div className="col-md-12 link-container">

                        <Link to="/dashboard/profile" className="color-white roboto">Profile</Link>
                    </div>
                    <div className="col-md-12 link-container">
                        <Link to="/dashboard/check-in" className="color-white roboto">Checkin</Link>
                    </div>
                    <div className="col-md-12 link-container">
                     <Link to="/dashboard/events" className="color-white roboto">Events</Link>
                     </div>
                     <div className="col-md-12 link-container">
                     <Link to="/dashboard/deals" className="color-white roboto">Deals</Link>
                     </div>
                     <div className="col-md-12 link-container">
                     <Link to="/dashboard/redemption" className="color-white roboto">Redemption</Link>
                     </div>
                     <div className="col-md-12 link-container ">
                     <Link to="/dashboard/invoice" className="color-white roboto">Invoice</Link>
                     </div>
                     <div className="col-md-12 link-container">
                     <Link to="/dashboard/notification" className="color-white roboto">Notification</Link>

                     </div>
                     <div className="col-md-12 link-container">
                     <Link to="/dashboard/restriction-management" className="color-white roboto">Restriction Management</Link>
                     </div>


                </div>

            </div>

Answer 1

You can put Router inside App component. (App is the main component all components must be inside it)

const App = () => {

 return (
  <Router>
   <div className="row home-container">
    <Switch>
     <Route path="/dashboard/" exact component={Dashboard} />
     <Route path="/dashboard/check-in" component={CheckIn} />
     <Route path="/dashboard/deals" component={Deals} />
     <Route path="/dashboard/events" component={Events} />
     <Route path="/dashboard/invoice" component={Invoice} />
     <Route path="/dashboard/notification" component={Notification} />
     <Route path="/dashboard/profile" component={Profile} />
     <Route path="/dashboard/redemption"  component={Redemptions} />
     <Route path="/dashboard/restriction-management" component={RestrictionManagement}     />
    </Switch>  

  <Header />
  <div className="col-md-12 pd-0-0" style={style}>
    <Sidebar />
  </div>
 </div>
</Router> 

);
};

İt migth be like this

Sidebar container is more appropriate try to write this way

 const Sidebar  = ({ match }) => {

return (
  <div className="col-md-2 col-sm-2 sidebar-container bg-black pd-0-0">
   <div className="row">
    <div className="col-md-12 link-container">
        <Link to={match.url + "/dashboard"} className="color-white roboto">Home</Link>                       
     </div>
     <div className="col-md-12 link-container">

        <Link to={match.url + "/dashboard/profile"} className="color-white roboto">Profile</Link>
    </div>
    <div className="col-md-12 link-container">
        <Link to={match.url + "/dashboard/check-in"} className="color-white roboto">Checkin</Link>
    </div>
    <div className="col-md-12 link-container">
     <Link to={match.url + "/dashboard/events"} className="color-white roboto">Events</Link>
     </div>
     <div className="col-md-12 link-container">
     <Link to={match.url + "/dashboard/deals"} className="color-white roboto">Deals</Link>
     </div>
     <div className="col-md-12 link-container">
     <Link to={match.url + "/dashboard/redemption"} className="color-white roboto">Redemption</Link>
     </div>
     <div className="col-md-12 link-container ">
     <Link to={match.url + "/dashboard/invoice"} className="color-white roboto">Invoice</Link>
     </div>
     <div className="col-md-12 link-container">
     <Link to={match.url + "/dashboard/notification"} className="color-white roboto">Notification</Link>

     </div>
     <div className="col-md-12 link-container">
     <Link to={match.url + "/dashboard/restriction-management"} className="color-white roboto">Restriction Management</Link>
     </div>

</div>

<Switch>
    <Route
      exact
      path={match.url}
      render={() => <div> Pick a project to view!</div>}
    />
</Switch>

Answer 2

What you need to do in this case is to use your container component as Layout to keep your sidebar persistent, and only render the children within its main.

I am assuming that the following is container - let's modify it as follows;

const Container = props => {
  const { children } = props;
  return (
    <div className="row home-container">
      <Header />
      <div className="col-md-12 pd-0-0" style={style}>
        <Sidebar />
      </div>
      <main>{children}</main>
    </div>
  );
};

The Components that you will send here as children will be rendered. Think about it as a HOC wrapper for your dashboard components such as Deals, Invoice etc.

In your Router, define a component to handle switching the routes with a layout. This will be our custom Route which renders our children within our layout.

const RouteWithLayout = props => {
  const { layout: Layout, component: Component, ...rest } = props;

  return (
    <Route
      {...rest}
      render={matchProps => (
        <Layout>
          <Component {...matchProps} />
        </Layout>
      )}
    />
  );
};

Import your container into your Router - assuming that we imported it as Container - then use RouteWithLayout that we defined instead of Route as follows;

<RouteWithLayout
   component={Dashboard}
   exact
   layout={Container}
   path="/dashboard/notification"
/>
<RouteWithLayout
   component={Profile}
   exact
   layout={Container}
   path="/dashboard/profile"
/>
...
And the rest

Answer 3

I think you’re going to have to make the content of any tab fit the box by using css. So like a profile tab have like a width of 50vw and height of 20vh and try rendering a text and see where it’d at on the page