同一页面上的响应路由器域渲染组件

我在证明路线时在我的项目中使用react-router-dom，而不是在第一个组件下方同一页面的另一个页面中渲染组件dom渲染组件我的App.js

import React,{Component} from 'react';
import './App.css'
import  Layout from './components/front/layout'
import FirstPage from './components/index/firstpage';
import {BrowserRouter ,Switch,Route} from 'react-router-dom';
class App extends Component {
render(){
return (  
<div className="container">
<BrowserRouter>
<FirstPage/>
<Switch>
<Route path='/Layout' exact component={Layout} />
</Switch>
</BrowserRouter>
</div> 
);
}
}
export default App;

我正在使用从react-router-dom导入到另一个页面的另一个我的MiddlePortion.js

 import React from 'react';
 import { Button, Form } from 'reactstrap';
 import axios from 'axios';
 import '../../css/style.css'
 import {Link} from 'react-router-dom'
 class Middleportion extends React.Component {
 constructor(props){
 super(props);
 this.Submit = this.Submit.bind(this);
 }
 render() {
 const layStyle={
   color:'white'
  };
  return (
 <div className='row frnt'>
 <div className="col-md-3">
 </div>
 <div className="col-md-6 am ">
 <div className="row align-items-center">
 <div className="row justify-content-center bg-primary  pp">
 <ul className="list-unstyled">
 <li><Link style={layStyle} to='/Layout'>
      male
    </Link></li>
    </ul>
    </div>
    </div>
 </div>
 <div className="col-md-3">
 </div>
    </div>
 );
 }
 }
 export default Middleportion;

我想在单独的页面上呈现我的布局组件，但是在同一页面上呈现它的组件，请帮帮我

您的代码存在的问题是，您正在手动渲染FirstPage，好像要进行硬编码一样。为了使FirstPage和Layout呈现在单独的路径中，您需要在<Switch>内部创建单独的路径，并像使用FirstPage一样将component用作Layout道具。它看起来像这样：

(
  <div className="container">
    <BrowserRouter>
      <Switch>
        <Route exact path='/' component={FirstPage} />
        <Route exact path='/Layout' component={Layout} />
      </Switch>
    </BrowserRouter>
  </div>
)

使用以上设置，FirstPage组件将仅在/路径上渲染，Layout组件将仅在/layout路径上渲染。