React 路由器 - 外部 html 容器

Question

我正在学习如何使用 React Router 并成功地设置了我的路由。我有一个关于您想要在所有页面上显示的外部 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 需要被制成一个组件本身，它可能看起来像这样：

outer-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> 中的组件。由于这需要是动态的，具体取决于您所在的页面，我是否需要以某种方式将其作为道具传递下去？

我看到该位置是作为来自路由器的道具传递下来的。我是否需要在 external-container.js 的渲染函数中添加一个 if 语句，比如 if route is /siteFeedback then render siteFeedback componenets inside of external-container？

在这里寻求最佳方法的建议，干杯

Answer 1

添加路由到最外层的url

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

并修改 externalContainer 如下

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

应该可以。