单击 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>

我的完整实时工作代码带有代码和框URL

Answer 1

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

import { Link } from 'react-router';

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

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