反應路由器混淆

Question

新反應& react-router。

我試圖理解這個例子：

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

但this.props決不會包含主或補充工具欄。我的代碼：

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; 

我使用電子反應開發工具。每當我調試時，this.props既不包含main也不包含sidebar。任何想法爲什麼發生這種情況？

我也試過使用IndexRoute，但它似乎不支持組件道具。

其他的事情我已經試過

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

（v4.0.0），它看起來像他們取消了路由上的組件prop：https://reacttraining.com/react-router/web/api/Route

你可以在任何地方渲染路由，他們甚至有一個sidebar example他們在那裏做。他們有一組路由組件來呈現主要組件和另一組用於側欄的路由組件，但都來自單個路由配置以保持乾燥。

要轉換的是你的代碼，你可以創建一個路由配置：

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

然後在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') 
); 

然後在App2.js

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

貌似有分量道具的工作，你需要使用<IndexRoute />組件，而不是<Route />。在反應路由器文檔中，它提到IndexRoute具有與Route類似的所有道具

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

的作品！

全碼：

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

乾杯！

Answer 3

github的例子是2年前寫的（看起來here），我不確定它與哪個特定的版本有關。我不確定它現在是否有效（因爲我也是新的反應），但我知道你沒有使用這種方法來達到這個目標，你可以使用分開的組件，其中將包含mainz和sidebar，在這裏我的例子：

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：不要忘記在你的例子中使用<Router history={browserHistory}>。
並在您的示例中使用IndexRoute或指定另一個，例如我的示例中的/a2。

Answer 4

我新來反應路由器我自己，但我相信你使用的路線是不正確的。在你給的例子，你有一個解決相同的路徑2點不同的路徑（/）：

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

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

我beleieve這應該是這樣的：如果您使用當前版本

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

我希望你知道你正在使用react-router 1.0.x並且已經過時了。當前版本是4.x.

下面的代碼完美工作（根據您提供的示例）。

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>