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

【问题标题】：React-router-dom rendering component on the same pagereact-router-dom 渲染组件在同一个页面
【发布时间】：2019-10-10 17:25:16
【问题描述】：

当我证明路由而不是在我的第一个组件下方的同一页面中的另一个页面 dom 渲染组件中渲染组件时，我在我的项目中使用 react-router-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;

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

【问题讨论】：

我对问题的上下文有点困惑。是不是 FirstPage 和 Layout 都在 '/Layout' 路由上渲染的问题？
在 /Layout 路由上是，FirstPage 和 Layout 都在渲染。Layout 在 FrontPage 组件之后渲染我想我应该使用条件路由，但仍然有人可以帮助我

标签： javascript node.js reactjs

【解决方案1】：

您的代码的问题在于您手动渲染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 路由上呈现。

【讨论】：