React Router - äußere HTML-Container

Question

Ich lerne, wie man React Router verwendet und es geschafft habe, meine Routen erfolgreich einzurichten. Ich habe jedoch eine Frage in Bezug auf äußere HTML-Container, die Sie auf allen Seiten anzeigen möchten (diese Container haben dann verschiedene Komponenten, die in ihnen rendern abhängig von welcher Route Sie sind). Hier ist mein Code:

index.js:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import siteFeedback from './sections/comments/site-feedback'; 
import { BrowserRouter,Switch, Route } from 'react-router-dom'; 

ReactDOM.render(
<BrowserRouter> 
    <Switch> 
     <Route path='/site-feedback' component={siteFeedback}/> 
    </Switch> 
</BrowserRouter>, 
    document.getElementById('root') 
); 

siteFeedback.js

import React, {Component} from 'react'; 

class siteFeedback extends Component { 
    render() { 
     return (
      <div className="outer-container"> 

       {/* some other code and containers here */} 

      </div> 
     ) 
    } 
} 

export default siteFeedback; 

Ich habe über so viel wie möglich meinen Code vereinfacht aus Gründen der Klarheit. Ich möchte, dass der div "äußere Container" jede Route, die ich habe, und in meinem Beispiel über seine in der Render-Funktion von siteFeedback fest codierte Route wickelt.

Mein erster Gedanke war, dass „Außen Container“ div in ein Bauteil hergestellt werden muss, selbst, die wie folgt aussehen könnte:

Außen container.js

import React, {Component} from 'react'; 

class outerContainer extends Component { 
    render() { 
     return (
      <div className="outer-container"> 
       {/* the componenets displayed in here would depend on what route you are on*/} 
      </div> 
     ) 
    } 
} 

export default outerContainer; 

Aber die Teil, mit dem ich kämpfe, sind die Komponenten, die dann innerhalb der <div className="outer-container"> </div> gehen müssten. Da dies abhängig von der Seite, auf der du dich befindest, dynamisch sein müsste, müsste ich das irgendwie als Requisite weitergeben?

Ich sehe, dass dieser Standort als eine Prop von dem Router weitergegeben wird. Benötige ich eine if-Anweisung in meiner Render-Funktion von outer-container.js, die etwas wie "route is/siteFeedback" sagt und dann siteFeedback-Komponenten innerhalb des äußeren Containers rendert?

um Rat hier auf dem besten Ansatz Sehen, prost

Answer 1

Weg zum äußersten url sollte

<Switch> 
    <Route path='/' component={outerContainer}/> 
    <Route path='/site-feedback' component={siteFeedback}/> 
</Switch> 

und Modifizieren outerContainer wie unten

return (
     <div className="outer-container"> 
      { this.props.children } 
     </div> 
) 

Hinzufügen arbeiten.