MUI AppBar如何去页面答案

【问题标题】：MUI AppBar how to go to the pagesMUI AppBar如何去页面
【发布时间】：2022-01-02 07:53:22
【问题描述】：

我是 MUI 和 React 的新手。我从 MUI.com 将示例“带有响应式菜单的应用栏”中的代码复制到 js 文件中。然后在 App.js 中调用它。出现一个菜单。在示例代码中有四个处理函数。使用了 setAnchorEInav、setAnchorEIuser。我的需要是，如果我单击产品菜单项，它应该转到 URL“/product”。怎么做？任何帮助都将感谢我在学习 MUI 和 React 的过程中迈出下一步。

【问题讨论】：

标签： reactjs material-ui appbar

【解决方案1】：

你需要使用 react router 之类的东西

https://v5.reactrouter.com/web/guides/quick-start

你需要像这个例子一样定义你的 react 应用的路由

<Router>
    {/* A <Switch> looks through its children <Route>s and
        renders the first one that matches the current URL. */}
    <Switch>
      <Route path="/about">
        <About />
      </Route>
      <Route path="/users">
        <Users />
      </Route>
      <Route path="/">
        <Home />
      </Route>
    </Switch>
  </div>
</Router>

在应用栏上定义好路由后，您可以使用链接组件在页面之间移动：

<Link to="/users">Users</Link>

【讨论】：

【解决方案2】：

Dave 说您需要使用 React Router 进行导航是正确的。他们的回答没有错，我只是想说明 React Router v6 已发布，并添加了更现代、更简化的基于插座的路由机制。

https://reactrouter.com/docs/en/v6/getting-started/overview

在项目的顶层（App.js）声明你的路由

<Router>
  <Routes>
    <Route path='/' element={<Dashboard />}>
      <Route element={<HomePage />} path='home' />
      <Route element={<UsersPage />} path='users'>
        <Route element={<AllUsers />} index /> // 'website.com/users'
        <Route element={<AddUser />} path='add-user'/> //'website.com/users/add-user'
        <Route element={<ViewUser /> path=':id' /> //'website.com/users/012345'
      </Route>
      <Route element={<AboutPage />} path='about' />
    </Route>
  </Routes>
</Router>

仪表板.js

const Dashboard = () => {

return (
  <div>
    <Outlet />
  </div>
}

基本仪表板页面

const UsersPage = () => {
return (
  <div>
    <Outlet />
  </div>
}

const HomePage = () => {
return (
  <div>
    <Outlet />
  </div>
}

const AboutPage = () => {
return (
  <div>
    <Outlet />
  </div>
}

【讨论】：

感谢您的回答。我的问题如下。我剪切并粘贴了“带有响应式菜单的 AppBar”中给出的示例代码，显示带有菜单项（如产品、定价、博客）的 AppBar。当我单击 Products 菜单项时，将调用 handleCloseNavMenu 函数，该函数将 useState 值设置为 null。代码就是这样写的。但我的要求是点击产品菜单应该加载一个包含所有产品的页面。代码来自mui.com/components/app-bar/#app-bar-with-menu。
就像戴夫说的。您需要使用 React Router 处理导航。 React 导航通常使用这个库来完成。 React 确实允许您使用基于目标的普通路由进行导航，但这对于像 React 这样的单页应用程序来说效率低下