React Link 更改 URL 但不刷新视图

Question

我对 React 中的 <Link to=""> 元素有疑问。单击它后，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>
    );
  }
}

我在其中调用/about URL 的Sidebar.js。这是一个额外的类 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() 的其他 stackoverflow 问题的答案：

<Route path="/about" component={withRouter(About)} />

也在这里的 About.js 中：

export default withRouter(About);

我还尝试将 Routes 包装到一个主要的 Route 和 Content 这样的组件中：

<Router>
    <Route path="/" component={Content} >
        <Route default component={Home} />
        <Route path="/about" component={About} />
    </Route>
</Router>

Answer 1

我认为BrowserRouter 在Sidebar 中没有用