У меня проблема с элементом <Link to="">
в React.После нажатия URL-адрес изменится, но вид останется прежним.После обновления страницы отображается правильный компонент, и роутер как таковой работает нормально.
Вот мой код:
App.js
class App extends Component {
render() {
return (
<BrowserRouter>
<React.Fragment>
<MainBar />
<Sidebar />
<Content sidebarOpen={this.state.sidebarOpen}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Content>
</React.Fragment>
</BrowserRouter>
);
}
}
Sidebar.js вкоторый я называю /about
URL.Вот дополнительный класс ListItemLink
для создания Link to
с React Material ListItem
class ListItemLink extends React.Component {
renderLink = itemProps => <Link to={this.props.to} {...itemProps} />;
render() {
const { icon, primary } = this.props;
return (
<li>
<ListItem button component={this.renderLink}>
<ListItemIcon>{icon}</ListItemIcon>
<ListItemText primary={primary} />
</ListItem>
</li>
);
}
}
class Sidebar extends React.Component {
render() {
return (
<Drawer >
<List>
<BrowserRouter>
<ListItemLink to="/about" primary="About" icon={<StarIcon />} />
</BrowserRouter>
</List>
</Drawer>
);
}
}
Что я уже пробовал:
Согласно ответам на другие вопросы, связанные с переполнением стека, ямы пробовали добавить withRouter()
здесь:
<Route path="/about" component={withRouter(About)} />
, а также в About.js здесь:
export default withRouter(About);
Я также пытался обернуть маршруты в основной Route
с помощью Content
компонент такой:
<Router>
<Route path="/" component={Content} >
<Route default component={Home} />
<Route path="/about" component={About} />
</Route>
</Router>