React路由器 - 外部html容器

我正在學習如何使用React路由器，併成功地設置了我的路由。我有一個問題，關於你想在所有頁面上顯示外部html容器（這些容器中有不同的組件，這些組件根據你的路線進行渲染）。這裏是我的代碼：React路由器 - 外部html容器

index.js：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import siteFeedback from './sections/comments/site-feedback'; 
import { BrowserRouter,Switch, Route } from 'react-router-dom'; 

ReactDOM.render(
<BrowserRouter> 
    <Switch> 
     <Route path='/site-feedback' component={siteFeedback}/> 
    </Switch> 
</BrowserRouter>, 
    document.getElementById('root') 
);

siteFeedback.js

import React, {Component} from 'react'; 

class siteFeedback extends Component { 
    render() { 
     return (
      <div className="outer-container"> 

       {/* some other code and containers here */} 

      </div> 
     ) 
    } 
} 

export default siteFeedback;

我已經簡化上面儘可能爲清楚起見，我的代碼。我想div的「外部容器」包裝我的每一個路線，在我的例子上面，它的硬編碼在siteFeedback的渲染功能。

我首先想到的是，「外容器」 DIV需要被製作成組件本身可能是這個樣子：

外container.js

import React, {Component} from 'react'; 

class outerContainer extends Component { 
    render() { 
     return (
      <div className="outer-container"> 
       {/* the componenets displayed in here would depend on what route you are on*/} 
      </div> 
     ) 
    } 
} 

export default outerContainer;

但我正在努力的部分是那些必須在<div className="outer-container"> </div>之內去的組件。因爲這需要動態地依賴於你在哪個頁面，我是否需要以某種方式將它作爲道具來傳遞？

我看到該位置作爲道具傳遞給路由器。我需要在我的渲染函數outer-container.js中使用if語句，該語句表示如果route爲/ siteFeedback，然後在外容器中渲染siteFeedback組件？

尋找建議在這裏最好的方法，歡呼聲

來源

2017-06-07 red house 87

添加路由到最外部URL

<Switch> 
    <Route path='/' component={outerContainer}/> 
    <Route path='/site-feedback' component={siteFeedback}/> 
</Switch>

和修改outerContainer如下

return (
     <div className="outer-container"> 
      { this.props.children } 
     </div> 
)

應該工作。

來源

2017-06-07 11:52:58 duwalanise

嗯，this.props.children沒有渲染任何東西，難道是因爲某些原因道具沒有被傳遞？然而，outerContainer會顯示在所有路線上（當我點擊/和/ site-feedback –

奇怪的是，它應該已經渲染了子組件。是否有任何錯誤或導入導出問題？ – duwalanise

React路由器 - 外部html容器

回答

相關問題