React Router使用Bootstrap网格系统渲染组件

Question

我有一个侧面导航栏，该栏应显示相同的组件，并在其旁边显示不同的数据。由于它具有相同的组件和不同的数据，因此我不得不使用render而不是component

const EngineeringInputs = ({ myData }) => {
  let tempVariable = myData.Inputs;
  return (
    <div>
      <hr />
      <div className="row">
        <div className="col-md-1">
          <Router>
            <SideNavBar buildingTypes={tempVariable} />
            <Switch>
              {Object.keys(tempVariable).map((key, index) => (
                <Route
                  path={`/${key}`}
                  render={props => (
                    <RunValues {...props} tempVariable={tempVariable[key]} />
                  )}
                />
              ))}
            </Switch>
          </Router>
        </div>
      </div>
    </div>
  );
};

此代码在SideNavBar下面显示RunValues组件，但我想要类似

<>
<div className='col-md-1'>
 <SideNavBar buildingTypes={runValuesData} />
{Router stuff}
</div>  
<div className='col-md-11>
 <RunValues />
</div>
</>

如何构造我的组件以实现这一目标？