Mira
PRO

Routing

Introduction

The package includes an implementation of React Router DOM, using the programmatic routing model.

How to add routes

Open /src/routes.js and add your new route to the routes variable. The example below will result in the <NewPage /> element being called on the http://localhost:3000/pages/new route.
import DashboardLayout from "./layouts/Dashboard";
import NewPage from "./pages/NewPage";

const routes = [
  {
    path: "pages",
    element: <DashboardLayout />,
    children: [
      {
        path: "new",
        element: <NewPage />,
      },
    ],
  },
];

export default routes;

How to add a link

Learn how to add a link to a component.
import { Link } from "react-router-dom";

function ExampleComponent() {
  return (
    <Link to="pages/new">
      New page
    </Link>
  );
}

export default ExampleComponent;

How to navigate programmatically

The example code below includes an example on how to navigate programmatically using the useNavigate hook.
import { useNavigate } from "react-router-dom";

function ExampleComponent() {
  const navigate = useNavigate();

  const handleSubmit = () => {
    navigate("/pages/new");
  };

  return (
    <form onSubmit={handleSubmit}>
      ...
    </form>
  );
}

export default ExampleComponent;