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

【问题标题】：Show different component when clicks the button in Reactjs单击 Reactjs 中的按钮时显示不同的组件
【发布时间】：2020-03-20 09:22:31
【问题描述】：

我已经创建了默认布局，我希望每当我单击每个按钮时，内容组件只会更改布局的某些部分。而且我还使用 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>

我的完整实时工作代码包含在代码沙盒中 URL

【问题讨论】：

这里有什么问题？

标签： javascript node.js reactjs material-ui

【解决方案1】：

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

import { Link } from 'react-router';

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

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

【讨论】：

@sangumee，我支持你，但如果你解释更多，我可以为你提供更多帮助。