React Link изменяет URL, но не обновляет представление - PullRequest
0 голосов
/ 14 декабря 2018

У меня проблема с элементом <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>

1 Ответ

0 голосов
/ 15 декабря 2018

Я думаю BrowserRouter бесполезно в Sidebar

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...