Comment rendre un composant à l'intérieur d'un composant en fonction de l'itinéraire

boo:

J'ai des itinéraires comme celui-ci: 

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

Lorsque l'itinéraire est /customersje veux Customerscomposant à l' intérieur du App composant. Quand l'itinéraire est /ticketsje veux à l' Tickets intérieur App et non Customers. Je pourrais vérifier l'itinéraire en utilisant

this.props.location.pathname == '/customers'mais c'est à ça que sert le routeur, non? Je ne devrais pas vérifier l'itinéraire et le rendu.

Sur la base de mes itinéraires ci-dessus, je vois un Customerscomposant ci App - dessous et non à l'intérieur.

Le se Appcompose d'en-tête et d'autres éléments. Je ne veux pas ajouter de code d'en-tête à tous mes composants.

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>

Comment rendre les composants à l'intérieur en Appfonction de l'itinéraire.

Shubham Khatri:

En supposant que vous ayez l'application comme composant principal et que vous souhaitiez que les composants Tickets et Clients soient à l'intérieur du composant App, vous pouvez utiliser des itinéraires imbriqués

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

Composant de l'application interne

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

Articles connexes