Question 359339 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How do I perform navigation using Link in React + Material UI

const pages = ['home', 'menu', 'reservation'];

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

I tried watching one or two videos on how to use Routing in MUI, yet I was unable to find a solution to this. Tried implementing the examples from Routing Libraries from MUI and yet I was unable to get it. Is there a simpler way of getting it done? I have updated my routes and route in App.tsx.

Tags:

2

Answers


  1. 0

    You can use react router dom package 6 ..
    here an example:

    [Github example][1]
    it has many methods to navigate, like “link to” and 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>
  );
}
    Login or Signup to reply.
  2. 0

    If I’m understanding your question correctly you are asking how to work with the Link component from @mui/core and the Link component from react-router-dom. You want to render MUI links using the RRD link as the actual rendered UI component.

    Import and alias one of the Link components, typically the "inner" component. I suggest also updating the pages array to hold objects that have both the link target path and the label you would like to display for it. Don’t forget to assign a React key to each mapped JSX element!

    Example:

    import { Link } from '@mui/material';
import { Link as BaseLink } from 'react-router-dom';

const pages = [
  {
    label: "Home",
    path: "/",
  },
  {
    label: "Menu",
    path: "/menu",
  },
  {
    label: "Reservation",
    path: "/reservation",
  },
];

...

<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
  {pages.map(({ label, path }) => (
    <Link key={path} component={BaseLink} to={path}>
      {label}
    </Link>
  ))}
</Box>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search