umi Routing Example

Here are some suggestions and example code for using umi routing, hoping to help you better understand umi routing and applications:

umi routing configuration file:

The umi routing configuration file is generally placed in the src/config directory, named router.js or router.config.js. Here is an example code of router.config.js:

export default [
  {
    path: '/',
    component: '@/layouts/index',
    routes: [
      {
        path: '/',
        redirect: '/home',
      },
      {
        path: '/home',
        component: '@/pages/Home',
        title: 'Home Page',
        routes: [
          {
            path: '/home/:id',
            component: '@/pages/Detail',
            title: 'Detail Page',
          },
        ],
      },
      {
        path: '/about',
        component: '@/pages/About',
        title: 'About Page',
      },
      {
        component: '@/pages/NotFound',
      },
    ],
  },
];

Explanation of routing configuration:

path: represents the path of the route, which can be a relative path or an absolute path.
component: represents the path of the page component used by the current route.
routes: represents the child routes contained in this route.
redirect: represents redirecting this route to another route.
title: represents the title of the route page (optional).

Using routing:

Inside the component, you can access routing information through umi's useHistory, useLocation, or useParams hooks. Here are some simple usage examples:

import { useHistory, useLocation, useParams } from 'umi';

export default function MyComponent() {
  const history = useHistory();
  const location = useLocation();
  const params = useParams();

  function handleClick() {
    history.push('/home');
  }

  return (
    <div>
      <p>Current location: {location.pathname}</p>
      <p>Params: {params.id}</p>
      <button onClick={handleClick}>Go Home</button>
    </div>
  );
}

The above is a basic example of umi routing configuration and usage.