Блог

Здесь я прокладываю пути, он изменяет URL-адрес, но не отображает компонент. Я перепробовал все, начиная с this.props.children и заканчивая использованием «exact», но, похоже, ничего не работает. Пожалуйста, помогите

 function Body() {
    const [{artist,artistAlbum}, dispatch] = DataLayerValue();
    console.log(artist);
    console.log(artistAlbum);
    
    return (
        <div className="body">
            <div className="header">
                <Header />
            </div>

            <Router>
                <div className="content">
                    <Switch>
                        <Route exact path="/"component={withRouter(Home)} />
                        <Route exact path="/harrdyx"component={withRouter(HarrdyPage)} />
                    </Switch>
                </div>
            </Router>
        </div>
    );
}

export default Body
 

Это тело Харрди

 return (
    <div>
        <Link to="/harrdyx">
        <StyledButton>Harrdy</StyledButton>
        </Link>
    </div>
)
 

Это компонент, который должен отображать

 function HarrdyPage(props) {
    const [{artist,artistAlbum},dispatch]=DataLayerValue();
       
    return (
        <div className="Harrdy-Sandhu">
            <div className="title-img">
                <div className="naam">Harrdy Sandhu</div>
                <div>
                    <img className="hlog" src={hh} alt="Harrdy_img"/>
                </div>
            </div>

            <div className="playH">
                <PlayCircleFilledIcon fontSize="large"  />
            </div>
            {this.props.children}
        </div>
    )
}
    
export default HarrdyPage;