如何在 React + Material UI 中使用 Link 进行导航

Question

          const pages = ['home', 'menu', 'reservation'];
          <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
            {pages.map((page) => (
                <Link component={Link} to='/'>Home</Link>

            ))}
          </Box>

我尝试观看一两个有关如何在 MUI 中使用路由的视频，但我无法找到解决方案。尝试实现 MUI 路由库中的示例，但我无法获取它。有没有更简单的方法来完成它？我已经在 App.tsx 中更新了我的路线和路线。

Answer 1

你可以使用react router dom包6..
这是一个例子：

[Github 示例][1]
它有很多导航方法，例如“链接到”和 useNavigate

import { Routes, Route, Outlet, Link } from "react-router-dom";

function Layout() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
          <li>
            <Link to="/nothing-here">Nothing Here</Link>
          </li>
        </ul>
      </nav>
      <hr />
      <Outlet />
    </div>
  );
}