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

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

实际上，我认为您的问题没有更明确的答案，但我想您的解决方案是使用 react-router 的 Link 或 NavLink 组件。事实上，您应该像下面这样构建您的按钮:

import { Link } from 'react-router';

~~
  <Link to="/about" className={classes.button} />
~~

但为了获得更好的答案，您应该解释更多。希望我的回答对你有帮助亲爱的。