React Router, wie kann ich dem Router mitteilen, dass er auf einer Komponente gerendert werden soll?

Question

Ich bin derzeit in der Lage, meine Navbar (TopPane-Komponente) zu verwenden, um von Seite zu Seite mit react Router Version 3.0.5 zu gehen. Ich möchte, dass die Route so gerendert wird, dass, wenn ich im oberen Bereich auf etwas klicke, die Route auf die mittlere Komponente anstatt auf die gesamte Seite gerendert wird. So sieht meine Hierarchie aus.

App --Left Pane --Top Pane --Center Pane

Mein routes.js ist dies:

import React from 'react'; 
 
import { Router, Route, browserHistory } from 'react-router'; 
 

 
import App from './components/App.jsx'; 
 
import Models from './components/Models.jsx'; 
 
import Projects from './components/Projects.jsx'; 
 
import Contact from './components/Contact.jsx'; 
 
import About from './components/About.jsx'; 
 
import CenterPane from './components/CenterPane.jsx'; 
 

 
export default (
 
    <Router history = {browserHistory}> 
 
    <Route path="/" component={App} /> 
 
    <Route path="/models" component={Models} /> 
 
    <Route path="/projects" component={Projects} /> 
 
    <Route path="/contact" component={Contact} /> 
 
    <Route path="/about" component={About} /> 
 
    </Router> 
 
);

Mein App.jsx ist dies :

import React from 'react'; 
 
import LeftPane from './LeftPane.jsx'; 
 
import RightPane from './RightPane.jsx'; 
 
import CenterPane from './CenterPane.jsx'; 
 
import TopPane from './TopPane.jsx'; 
 
import Models from './Models.jsx'; 
 
import Projects from './Projects.jsx'; 
 
import Contact from './Contact.jsx'; 
 
import Router from 'react-router'; 
 

 
class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { none: 'none' }; 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <div className="container-fluid"> 
 
      <div> 
 
      <TopPane /> 
 
      </div> 
 
      <div className="container-fluid text-center">  
 
      <div className="row content"> 
 
       <div className="col-sm-2 sidenav"> 
 
       <LeftPane /> 
 
       </div> 
 
       <div className="col-sm-10 text-left"> 
 
       <CenterPane /> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
export default App;

Kann jemand lassen Sie mich wissen, wie über das Erhalten reagieren-Router gehen, um die Strecken nur auf der CenterPane Komponente statt der gesamten Seite Verschwindens zu machen (und damit verliere ich meine oberen Bereich navbar, weil es nur auf App .jsx).

Answer 1

Dafür müssen Sie die Routenstruktur ändern, verschachtelte Routen erstellen und App als übergeordnetes Element festlegen. Auf diese Weise wird nur ein Teil der App-Komponente nicht die gesamte Seite ändern.

Definieren Sie die Routen wie folgt aus:

export default (
    <Router history = {browserHistory}> 
     <Route path="/" component={App}> 
     <Route path="/models" component={Models} /> 
     <Route path="/projects" component={Projects} /> 
     <Route path="/contact" component={Contact} /> 
     <Route path="/about" component={About} /> 
     </Route> 
    </Router> 
); 

Innen App Komponente Verwendung this.props.children innerhalb Methode machen, an dieser Stelle die Komponente Kind Route erhalten gerendert wird.

Für weitere Informationen zu react-router v3 überprüfen Sie die DOC.