React Router Insertion de contenu dans BaseLayout

Question

J'ai une application React d'une seule page. J'ai un composant BaseLayout qui sert de conteneur pour l'application. Baselayout affiche l'en-tête et pied de page et aussi le contenu comme indiqué ci-dessous:

class App extends Component { 
    render() { 
    return (

     <div> 
     <BaseLayout> 

     </BaseLayout> 
     </div> 

    ); 
    } 
} 

baselayout

export default class BaseLayout extends Component { 

    render() { 
    return (
     <div> 
     <NavBar /> 
     {this.props.children} 
     <Footer /> 
     </div> 
    ) 
    } 

} 

index.js

ReactDOM.render(
    <BrowserRouter> 
    <Switch> 
     <Route path="/page_one" component={PageOne} /> 
     <Route path="/page_two" component={PageTwo} /> 
     <Route path="/" component={App} /> 
    </Switch> 
    </BrowserRouter>, 
    document.getElementById('root') 
) 

Toute la navigation se trouve dans la barre de navigation Composant .js.

navBar.js

export default class NavBar extends Component { 

    render() { 
    return (
     <div className="nav-bar"> 
     <button><Link to="/">Home</Link></button> 
     <button><Link to="/page_one">Page One</Link></button> 
     <button><Link to="/page_two">Page Two</Link></button> 
    </div> 
    ) 
    } 

} 

pageOne.js et pageTwo.js

export default class PageOne extends Component { 

    constructor(props) { 
    super(props) 
    } 

    render() { 
    return (

     <div> 
     <h1>Page One </h1> 
     </div> 


    ); 
    } 

} 

Le problème est que quand je vais à page_one ou URL page_two il ne montre que le contenu de le composant et non la barre de navigation.

Comment rendre la barre de navigation et le pied de page visibles sur toutes les pages à l'aide du routeur de réaction et de la structure de réaction?

MISE À JOUR:

app.js

class App extends Component { 
    render() { 
    return (

     <div> 
     <BaseLayout> 

     </BaseLayout> 
     </div> 

    ); 
    } 
} 

export default App; 

J'ai changé index.js à ce qui suit:

ReactDOM.render(
    <BrowserRouter> 
     <Route path="/" component={App}> 
      <Switch> 
       <Route path="/page_one" component={PageOne} /> 
       <Route path="/page_two" component={PageTwo} /> 
      </Switch> 
     </Route> 
    </BrowserRouter>, 
    document.getElementById('root') 
) 

Maintenant, je reçois le texte suivant:

Et la page ne va nulle part si j'utilise le code ci-dessus:

Answer 1

Je pense que vous devriez « lever » la App comme la racine Route. Par ailleurs, est App le même que BaseLayout? difficile à dire de votre exemple.
Exemple:

const Index =() => { 
    return (
    <BrowserRouter> 
     <div> 
     <Route component={App} /> 
     <Switch> 
      <Route path="/page_one" component={PageOne} /> 
      <Route path="/page_two" component={PageTwo} /> 
     </Switch> 
     </div> 
    </BrowserRouter> 
); 
}; 

A running code example, je ne suis pas à l'aide d'un extrait de pile que je ne peux pas utiliser route réagir avec l'état de pression ici.

je signale tout le code dans le cas où l'URL sera brisée à l'avenir:

import React from "react"; 
import { render } from "react-dom"; 
import { BrowserRouter, Route, Link, Switch } from "react-router-dom"; 

const Footer =() => <div>Footer...</div>; 

class BaseLayout extends React.Component { 
    render() { 
    return (
     <div> 
     <NavBar /> 
     {this.props.children} 
     <hr/> 
     <Footer /> 
     </div> 
    ); 
    } 
} 

class NavBar extends React.Component { 
    render() { 
    return (
     <div className="nav-bar"> 
     <button> 
      <Link to="/">Home</Link> 
     </button> 
     <button> 
      <Link to="/page_one">Page One</Link> 
     </button> 
     <button> 
      <Link to="/page_two">Page Two</Link> 
     </button> 
     </div> 
    ); 
    } 
} 

const PageOne =() => <h1>Page One</h1>; 
const PageTwo =() => <h1>Page Two</h1>; 

class App extends React.Component { 
    render() { 
    return (
     <div> 
     <BaseLayout>{this.props.children}</BaseLayout> 
     </div> 
    ); 
    } 
} 

const Index =() => { 
    return (
    <BrowserRouter> 
     <div> 
     <Route component={App} /> 
     <Switch> 
      <Route path="/page_one" component={PageOne} /> 
      <Route path="/page_two" component={PageTwo} /> 
     </Switch> 
     </div> 
    </BrowserRouter> 
); 
}; 

render(<Index />, document.getElementById("root"));