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，用于使用React Material Link to

创建一个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>

Answer 1

我认为BrowserRouter在Sidebar中没有用

React Link更改URL，但不刷新视图

1 个答案: