React Router Verwirrung

Question

Neu zu reagieren & Reagieren-Router.

Ich versuche, dieses Beispiel zu verstehen:

https://github.com/ReactTraining/react-router/blob/1.0.x/docs/API.md#components-1

Aber this.props nie enthält Haupt- oder Seitenleiste. Mein Code:

main.js

ReactDOM.render(
    <Router> 
     <Route path="/" component={App2}> 
     <Route path="/" components={{main: Home, sidebar: HomeSidebar}}/> 

     </Route> 
    </Router>, 
    document.getElementById('content') 
); 

App2.js

class App2 extends React.Component { 
    render() { 
    const {main, sidebar} = this.props; 
    return (
     <div> 
      <Menu inverted vertical fixed="left"> 
      {sidebar} 
      </Menu> 
      <Container className="main-container"> 
      {main} 
      </Container> 
     </div> 
    ); 
    } 
} 

export default App2; 

Home.js

import React from 'react'; 

class Home extends React.Component { 

    render() { 
    return (
     <div><h1>Home</h1></div> 
    ); 
    } 

} 

export default Home; 

HomeSidebar.js

class HomeSidebar extends React.Component { 
    render() { 
    return (
     <div> 
     <p>I'm a sidebar</p> 
     </div> 

    ); 
    } 
} 

export default HomeSidebar; 

Ich verwende ein Elektron mit react dev tools. Wann immer ich debugge, enthält this.props weder main noch sidebar. Irgendeine Idee, warum das passiert?

Ich habe auch versucht, eine IndexRoute zu verwenden, aber es scheint, eine Komponentenstütze nicht zu unterstützen.

Andere Dinge, die ich habe versucht

ReactDOM.render(
    <Router> 
     <Route component={App2}> 
     <Route path="/" components={{main: Home, sidebar: HomeSidebar}}/> 
     </Route> 
    </Router>, 
    document.getElementById('content') 
); 

ReactDOM.render(
    <Router> 
     <Route path="/" component={App2} components={{main: Home, sidebar: HomeSidebar}}> 
     <Route path="admin" components={{main: Admin, sidebar: AdminSidebar}}/> 
     </Route> 
    </Router>, 
    document.getElementById('content') 
); 

Answer 1

Wenn Sie die aktuelle Version verwenden von react-router (v4.0.0), sieht es so aus, als hätten sie die Komponenten Prop auf Routes: https://reacttraining.com/react-router/web/api/Route

Sie können Routen überall rendern, und sie haben sogar eine sidebar example, wo sie genau das tun. Sie haben einen Satz von Route-Komponenten zum Rendern der Hauptkomponenten und einen weiteren Satz von Route-Komponenten für Sidebars, aber beide kommen von einer einzigen Routenkonfiguration, um sie DRY zu halten.

Um das zu Ihrem Code zu übersetzen, könnten Sie eine Route Config erstellen:

const routes = [ 
    { path: '/', 
    sidebar: Sidebar 
    main: Main 
    } 
]; 

Dann in main.js

ReactDOM.render(
    <Router> 
     <Route component={App2}> 
     {routes.map((route, index) => (
      <Route 
      key={index} 
      path={route.path} 
      component={route.main} 
      /> 
     ))} 
     </Route> 
    </Router>, 
    document.getElementById('content') 
); 

in App2.js Dann

class App2 extends React.Component { 
    render() { 
    return (
     <div> 
      <Menu inverted vertical fixed="left"> 
      {routes.map((route, index) => (
       <Route 
       key={index} 
       path={route.path} 
       component={route.sidebar} 
       /> 
      ))} 
      </Menu> 
      <Container className="main-container"> 
      {this.props.children} 
      </Container> 
     </div> 
    ); 
    } 
} 

export default App2; 

Answer 2

wie sieht die Komponenten prop Arbeit haben Sie die <IndexRoute /> Komponente statt <Route /> verwenden müssen. In dem reagieren-Router docs erwähnt, dass IndexRoute alle der gleichen Requisiten wie Strecke so

<IndexRoute components={{main: Main, side: Side}} /> 

Werke zu tun!

Voll Code:

React.render((
    <Router> 
    <Route path="/" component={App} > 
     <IndexRoute components={{main: Main, side: Side}} /> 
    </Route> 
    </Router> 
), document.getElementById('app')) 

Codepen: http://codepen.io/chmaltsp/pen/ZeLaPr?editors=001

Prost!

Answer 3

Das Beispiel von github wurde vor 2 Jahren geschrieben (siehe here) und ich bin mir nicht sicher, für welche bestimmte Version es verwandt ist. Und ich bin mir nicht sicher, ob es jetzt funktioniert (weil ich auch neu reagiere), aber ich weiß, dass du diesen Ansatz nicht benutzt hast, um dieses Ziel zu erreichen, du kannst die getrennte Komponente, die mainz und sidebar enthält, hier verwenden mein Beispiel:

class App2 extends React.Component { 
    render() { 
    return (
     // Your Menu. 
     // Your Container. 
     <div> 
      {this.props.children} 
     </div> 
    ); 
    } 
} 
class Home extends React.Component { 
    render() { 
    return (<div><h1>Home</h1></div>); 
    } 

} 
class HomeSidebar extends React.Component { 
    render() { 
    return (<div><p>I am a sidebar</p></div>); 
    } 
} 
class HomeWithSidebar extends React.Component { 
    render() { 
    return (
     <div> 
      <Home /> 
      <HomeSidebar /> 
     </div> 
    ); 
    } 
} 
ReactDOM.render(
    <Router history={browserHistory}> 
     <Route path="/" component={App2}> 
     <Route path="/a2" components={HomeWithSidebar} /> 
     </Route> 
    </Router>, 
    document.getElementById('content') 
); 

PS: vergessen Sie nicht, den Einsatz <Router history={browserHistory}> in Ihrem Beispiel.
Und verwenden Sie IndexRoute in Ihrem Beispiel oder eine andere, wie /a2 in meinem Beispiel.

Answer 4

Ich bin neu, um Router selbst zu reagieren, aber ich bin sicher, dass die Routen, die Sie verwenden, falsch sind.in dem Beispiel, das Sie Sie 2 verschiedene Routen geben, die auf den gleichen Pfad (/) lösen:

ReactDOM.render(
    <Router> 
     <Route path="/" component={App2}> 
     <Route path="/" components={{main: Home, sidebar: HomeSidebar}}/> 

     </Route> 
    </Router>, 
    document.getElementById('content') 
); 

ich diese wie sein etwas beleieve sollte:

ReactDOM.render(
    <Router> 
     <Route path="/" component={App2}> 
     <IndexRoute components={{main: Home, sidebar: HomeSidebar}}/> 
     <Route path="some/other/path" components={{main: Home, sidebar: SomeOtherSidebar}}/> 
     </Route> 
    </Router>, 
    document.getElementById('content') 
); 

Answer 5

I Ich hoffe, Sie wissen, dass Sie react-router 1.0.x verwenden und es ist ziemlich veraltet. Aktuelle Version ist 4.x.

Unten Code funktioniert perfekt (basierend auf Ihrem Beispiel zur Verfügung gestellt).

let Router = ReactRouter.Router; 
 
let RouterContext = Router.RouterContext; 
 
let Route = ReactRouter.Route; 
 

 
class App2 extends React.Component { 
 
    render() { 
 
    const { main, sidebar } = this.props; 
 
    return (
 
     <div> 
 
     <div className="Main"> 
 
      {main} 
 
     </div> 
 
     <div className="Sidebar"> 
 
      {sidebar} 
 
     </div> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 

 
class Home extends React.Component { 
 

 
    render() { 
 
    return (
 
     <div><h1>Home</h1></div> 
 
     
 
    ); 
 
    } 
 

 
} 
 

 

 
class HomeSidebar extends React.Component { 
 
    render() { 
 
    return (
 
     <div> 
 
     <p>I'm a sidebar</p> 
 
     </div> 
 

 
    ); 
 
    } 
 
} 
 

 

 
ReactDOM.render(
 
    <Router> 
 
     <Route component={App2}> 
 
     <Route path="/" components={{main: Home, sidebar: HomeSidebar}}/> 
 
     </Route> 
 
    </Router>, 
 
    document.getElementById('content') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/1.0.3/ReactRouter.min.js"></script> 
 

 
<div id="content"></div>