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路由上呈現。