How to render component inside a component based on route

Question

I have routes like this:

<Provider store={store}>
    <BrowserRouter>
        <Route path="/"  component={App} />
        <Route path="/customers" component={Customers} />
        <Route path="/tickets" component={Tickets} />
    </BrowserRouter>
</Provider>

When the route is /customers I want Customers component inside App component. When the route is /tickets I want Tickets inside App and not Customers. I could check the route using

this.props.location.pathname == '/customers' but that's what the Router is for, right? I shouldn't be checking the route and rendering.

Based on my routes above, I see Customers component below App and not inside it.

The App consists of header and stuff. I don't want to add header code to all my components.

App.js:

     <Header style={{ height: '39px', lineHeight: '39px' }}>
       <Link to="/home">
         <div className="logo" style={{ float: 'left' }}>
           <img src="" />
           <h2>Appnam</h2>
         </div>

       </Link>
       {navEl}
  </Header>
  <Content >
     // Customer or Tickets component here based on route
  </Content>

How do I render the components inside App based on the route.

Shubham Khatri · Accepted Answer · 2020-04-08 06:22:38Z

2

Assuming you have App as the main component, and you want the Tickets and Customers components inside the App component, you can make use of nested routes

<Provider store={store}>
    <BrowserRouter>
        <Route path="/"  component={App} />
    </BrowserRouter>
</Provider>

Inside App component

class App extends React.Component {
   render() {
       return (
          <div>
             {/* rest of App code */} 
             <Route path="/customers" component={Customers} />
             <Route path="/tickets" component={Tickets} />
          </div>
       )
   }
}

answered Apr 8, 2020 at 6:22

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

1 Comment

boo Over a year ago

so which ever Component I put a <Route path="/customers" /> that component will be rendered in that parent component?

samuel abraham · Accepted Answer · 2022-09-16 17:14:26Z

0

make use of.

<Provider store={store}>
<BrowserRouter>
    <Route exact path="/"  component={App} />
    <Route exact path="/customers" component={Customers} />
    <Route exact path="/tickets" component={Tickets} />
</BrowserRouter>

that will work

answered Sep 16, 2022 at 17:14

samuel abraham

113 bronze badges

Collectives™ on Stack Overflow

How to render component inside a component based on route

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related