BrowserRouter does not render view of another component in the same page

Question

I am having a very simple app with Carousel. Each slide has a button. When the user clicks on the buttons, it should show the corresponding page at the bottom container. I am passing individual Slide from the parent component as a property called content. Below is my code

Snippet from Slidebar.js which is passing the slides to SlideContent

          <div css={SliderBarCss}>
                                  {this.props.slides.map((slide, i) => (
                  <SlideContent  key={i} content={slide} />
                ))}            
             
            </div>

SlideContent.js

/** @jsx jsx */
import React from 'react';
import { BrowserRouter, Link } from 'react-router-dom';
import Routes from './Routes';

import { css, jsx } from '@emotion/core'

export default class SlideContent extends React.Component {

    constructor(props) {
        super(props);
    }
     render(){

      <div>
          <h1>{this.props.content.title}</h1>
          <p>{this.props.content.description}</p>
          <BrowserRouter>
             <Link to={this.props.content.link}><button>{this.props.content.button}</button> 
             </Link>
          </BrowserRouter>
      </div>
        )
      }
}

I have defined the Routes in another file Routes.js

import React, { Component } from 'react';
import { css, jsx } from '@emotion/core'

import { Route, Link, Switch, Redirect } from 'react-router-dom';
import Component1 from '../innerComponents/Component1';
import Component2 from '../innerComponents/Component2';
import HomeComponent from '../innerComponents/Home';

 class Routes extends Component{
    constructor(props){
        super(props);
      
    }

    render(){
        return(
            
         <Switch>
          <Route exact path="/Home" component={HomeComponent} />
          <Route exact path="/">
          <Redirect to="/Home" />
          </Route>
          <Route exact path="/Component1" component={Component1} />
          <Route exact path="/Component2" component={Component2} />
         </Switch>
              
        )
    }
}



export default Routes;

below is my app.js where I want my content to show up on button click.

function App() {
  return (
    <div className="App">
       <SliderContainer/>     
      
      <BrowserRouter>
        <Route component={Routes}></Route>                
      </BrowserRouter>
    </div>
  );
}

The URL on the top is changing but the view is not. Really appreciate any help

check if you're importing the SliderContainer in the app.js. — Jonathan Akwetey Okine, Jul 12 '20 at 11:57
I am importing in app.js.. when i inspect SlideContent, The variable this.props.content.link has value unidentified. But on clicking the button, the url gets changed, but view is not getting rendered — Seeker, Jul 12 '20 at 13:09
I don't see where your passing you're passing props to the SildeContainer? But do you get the other values for the content object? — Jonathan Akwetey Okine, Jul 12 '20 at 13:41
@JonathanAkweteyOkine i added the parent component to the original post. I am getting all the other values. Even when i click on the Button, the url is changing — Seeker, Jul 12 '20 at 14:02
it is difficult for me to replicate your problem at my end. But can you try this in your app.js why don't you do the switch in the route.js inside the BrowserRouter and import the components there? Else, please create a fiddle or a codepen and share the link. — Jonathan Akwetey Okine, Jul 12 '20 at 15:14
@JonathanAkweteyOkine It finally worked when I removed the element from my SlideContent.js and added it to app.js as a parent to both and . I haw updated the post with solution. But can you tell me the reason for this ? — Seeker, Jul 13 '20 at 20:51
App Component is the main component in React which acts as a container for all other components. — Jonathan Akwetey Okine, Jul 13 '20 at 23:24

score 0 · Accepted Answer · answered Jul 14 '20 at 08:42

SOLUTION: I removed the BrowserRouter element from SlideContent.js and MainContent.js. Added it as a parent to both SliderContainer and MainContent. Shown below are all changed the files

Removed BrowserRouter from SlideContent.js

export default class SlideContent extends React.Component {

    constructor(props) {
        super(props);
    }
     render(){

      <div>
          <h1>{this.props.content.title}</h1>
          <p>{this.props.content.description}</p>
         
             <Link to={this.props.content.link}><button>{this.props.content.button}</button> 
             </Link>

      </div>
        )
      }

Removed BrowserRounter from MainContent.js

class MainContent extends React.Component{

    render(){
        return(
              <Route component={Routes}></Route>
          
        )
    }
}

Added BrowserRouter to the parent of SliderContainer and MainContent app.js

function App() {
  return (
    <div className="App">
      <BrowserRouter>       
        <SliderContainer/>     
        <MainContent/>
       </BrowserRouter>          
    </div>
  );
}

export default App;

BrowserRouter does not render view of another component in the same page

1 Answers1