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
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
Removed BrowserRounter from MainContent.js
Added BrowserRouter to the parent of SliderContainer and MainContent app.js