React-router-dom rendering component on the same page

Question

i am using react-router-dom in my project when i am proving routes instead of rendering the component in another page dom rendering component in the same page below my first component My 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;

My another middlePortion.js where i am using imported from react-router-dom to route to another page

 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;

I want to render my Layout component on separate page but its rendering on the same page please help me out

I'm a little confused with the context of the problem. Is the problem that FirstPage and Layout are both rendering on the '/Layout' route? — fvaldez421
– fvaldez421, Commented Oct 10, 2019 at 21:36
yes on /Layout route both FirstPage and Layout are rendering.Layout is rendering just after FrontPage component i guess i should use conditional routing but still can anyone help me — aman chand
– aman chand, Commented Oct 11, 2019 at 18:23

fvaldez421 · Accepted Answer · 2019-10-14 23:38:17Z

3

The problem with your code is that you're rendering FirstPage manually as if to be hard coded. In order to get FirstPage and Layout to render in separate routes, you need to create a separate route inside your <Switch> and use FirstPage as the component prop like you did with Layout. It would look like this:

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

With the setup above, the FirstPage component would render only on the / route and the Layout component would only render on the /layout route.

answered Oct 14, 2019 at 23:38

fvaldez421

1965 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React-router-dom rendering component on the same page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related