Reagiere JS - React Router - Inhalt wird separat gerendert

Question

Ich versuche, den Inhalt in einem Element getrennt vom Element menu nav darzustellen, aber das Rendering bleibt im selben Element wie die Menüleiste. Ich habe versucht, die Links vom Router zu trennen, aber dann Fehler bekommen.

Hier ist meine Router-Komponente, die ich in meinen Eintrag Datei bin importieren:

import React from 'react'; 
 
import ReactDOM from 'react-dom'; 
 
import ReactDOMServer from 'react-dom/server'; 
 
import {BrowserRouter as Router, Route, Link, StaticRouter} from 'react-router-dom'; 
 

 
import Home from './Home.jsx'; 
 
import About from './About.jsx'; 
 
import BlogList from './BlogList.jsx'; 
 

 
const Routes =() => (
 
    <Router> 
 
     <div> 
 
      <ul> 
 
       <li><Link to="/">Home</Link></li> 
 
       <li><Link to="/about">About</Link></li> 
 
       <li><Link to="/blog">Blog</Link></li> 
 
      </ul> 
 
      <Route exact path="/" component={Home} /> 
 
      <Route path="/about" component={About} /> 
 
      <Route path="/blog" component={BlogList} /> 
 
     </div> 
 
    </Router> 
 
) 
 

 
export default Routes; 
 

 
ReactDOM.render((
 
    <Routes /> 
 
), document.getElementById('main-nav'))

Meine Frage ist:

Wie machen den Inhalt aus dem Heim, über und Blog-Komponenten in einem separaten Element, damit sie nicht innerhalb von "# main-nav" gerendert werden? Eine Route kann nur ein untergeordnetes Element haben.

Wenn ich versuche, die Routen in einem eigenen Div-Container hinzuzufügen, erhalte ich Fehler. Wenn ich ein nav-Element in die ul einpacke, erhalte ich einen Fehler.

Idealerweise möchte ich etwas wie folgt aus:

<nav id="main-nav"> 
 
    <div> 
 
     <ul> 
 
      <li a href="/">Home</a></li> 
 
      <li a href="/about">About</a></li> 
 
      <li a href="/blog">Blog</a></li> 
 
     </ul> 
 
    </div> 
 
</nav> 
 
<div id="content"> 
 
    Home/ABout/Blog Content in here 
 
</div>

Answer 1

ich hatte das gleiche Problem und ich regelte es die HTML5 in Subkomponenten spliting. Grundsätzlich müssen Sie nur alle Komponenten stellen innerhalb des <BrowserRouter> oder in <StaticRouter> .Für Beispiel in den render() versuchen, etwas wie folgt aus:

 import { Router, Route, Link,NavLink} from 'react-router-dom'; 
     import createBrowserHistory from 'history/createBrowserHistory'; 
     import HeaderNav from './HeaderNav'; 
     import SectionContent from './SectionContent'; 
     import FooterComponent from './FooterComponent';  

     export default class Layout extends React.Component{ 
      constructor(props) { 
       super(props); 
      } 
      render(){ 
       var history=createBrowserHistory(); 
       return(
        <Router history={history}> 
         <HeaderNav/> 
         <SectionContent/> 
         <FooterComponent/> 
        </Router> 
       ); 
      } 
     } 

Obviusly auch Sie benötigen die <NavLink> für die <nav> in die HeaderNav Komponente und für den Inhalt Sie brauchen nur <Route>, auch Sie brauchen history npm