react-router-dom 渲染组件在同一个页面

Question

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

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;

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

Answer 1

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

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

通过上面的设置， FirstPage组件将仅在/路由上呈现，而Layout组件将仅在/layout路由上呈现。