Question

我已经创建了默认布局，我希望每当单击每个按钮时，内容组件都只会更改布局的某些部分。而且我还使用React Router控制不同的页面。

每个按钮都指向另一个URL。

<main
  className={clsx(classes.content, {
    [classes.contentShift]: open,
  })}
>
  <div className={classes.drawerHeader} />
  {/* This part should change every button clicks!!! */}
</main>

我认为它可以控制住，但是对此我一无所知。

<Switch>
  <Route path="/login" component={SignIn}>
    {/* <SignIn /> */}
  </Route>
  <Route path="/about">
    {/* <About /> */}
  </Route>
  <Route path="/users">
    {/* <Users /> */}
  </Route>
  <Route path="/">
  </Route>
    {/* <Home /> */}
</Switch>

我的全部实时工作代码都包含在codesandbox中 URL

Answer 1

实际上，我认为您的问题尚不清楚，但是我想您的解决方案是使用Link的{{1}}或NavLink组件。实际上，您应该像下面那样构建按钮：

react-router

但是要获得更好的答案，您应该解释更多。希望我的回答对您有帮助。

单击Reactjs中的按钮时显示不同的组件

1 个答案: