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容器

回答

相关问题