实践出真知，学好@medux要勇于尝试！

2023-09-03 14:59:24

<#article>

前言

在前面的文章中，我们已经学习了@medux的基本概念和功能。在本章中，我们将重点介绍@medux的路由管理。路由管理是@medux的核心功能之一，它可以帮助我们管理应用程序中的各个页面。

路由配置

在@medux中，路由配置主要通过createRouter函数来完成。该函数接收一个对象作为参数，该对象包含了路由规则、路由组件和路由守卫等信息。

const router = createRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/contact',
      component: Contact
    }
  ]
})

上面的代码中，我们定义了三个路由规则。第一个路由规则匹配根路径'/',第二个路由规则匹配'/about'路径，第三个路由规则匹配'/contact'路径。每个路由规则都有一个对应的组件，该组件就是当该路由规则匹配时显示的页面。

路由匹配

当用户访问某个页面时，@medux会根据路由配置中的路由规则来匹配该页面。如果某个路由规则匹配了该页面，那么该路由规则对应的组件就会被渲染出来。

const Home = () => {
  return <h1>Home</h1>
}

const About = () => {
  return <h1>About</h1>
}

const Contact = () => {
  return <h1>Contact</h1>
}

上面的代码中，我们定义了三个组件，分别对应三个路由规则。当用户访问根路径'/'时，Home组件就会被渲染出来。当用户访问'/about'路径时，About组件就会被渲染出来。当用户访问'/contact'路径时，Contact组件就会被渲染出来。

路由参数

有时候，我们需要在路由中传递一些参数。例如，我们要在文章详情页面显示文章的ID，那么我们可以在路由规则中定义一个参数。

const router = createRouter({
  routes: [
    {
      path: '/article/:id',
      component: ArticleDetail
    }
  ]
})

上面的代码中，我们在/:id后面定义了一个参数id。当用户访问/article/1路径时，id参数的值为1。我们可以通过useParams钩子来获取路由参数的值。

const ArticleDetail = () => {
  const { id } = useParams()

  return <h1>Article Detail {id}</h1>
}

上面的代码中，我们通过useParams钩子获取到了路由参数id的值。然后，我们在<h1>标签中显示了文章的ID。

路由重定向

有时候，我们需要将用户重定向到另一个页面。例如，我们要将用户从根路径'/'重定向到'/home'路径。我们可以通过useLocation和useNavigate钩子来实现路由重定向。

const Home = () => {
  const location = useLocation()
  const navigate = useNavigate()

  if (location.pathname === '/') {
    navigate('/home')
  }

  return <h1>Home</h1>
}

上面的代码中，我们通过useLocation钩子获取到了当前的路径。然后，我们通过useNavigate钩子将用户重定向到了'/home'路径。

路由守卫

路由守卫可以用来控制用户对某些页面的访问。例如，我们要限制只有登录用户才能访问/admin路径下的页面。我们可以通过useAuth钩子来实现路由守卫。

const Admin = () => {
  const { user } = useAuth()

  if (!user) {
    return <h1>Unauthorized</h1>
  }

  return <h1>Admin</h1>
}

上面的代码中，我们通过useAuth钩子获取到了当前用户的信息。然后，我们通过if语句判断用户是否登录。如果用户没有登录，我们就会返回一个<h1>标签，显示“Unauthorized”。如果用户已经登录，我们就会返回一个<h1>标签，显示“Admin”。

路由懒加载

路由懒加载可以用来提高应用程序的性能。通过路由懒加载，我们可以在需要的时候再加载某个组件。例如，我们要在Home组件中加载About组件。我们可以通过useLazyLoad钩子来实现路由懒加载。

const Home = () => {
  const About = useLazyLoad(() => import('./About'))

  return <h1>
    <About />
  </h1>
}

上面的代码中，我们通过useLazyLoad钩子来加载About组件。然后，我们在<h1>标签中渲染了About组件。

路由传参

有时候，我们需要在路由中传递一些数据。例如，我们要在Home组件中传递一个name参数。我们可以通过useLocation和useNavigate钩子来实现路由传参。

const Home = () => {
  const location = useLocation()
  const navigate = useNavigate()

  const name = location.state.name

  return <h1>
    Hello {name}
  </h1>
}

上面的代码中，我们通过useLocation钩子获取到了当前的路径和状态。然后，我们通过useNavigate钩子将用户重定向到了'/home'路径，并将name参数传递给了该路径。

路由跳转

有时候，我们需要在应用程序中跳转到某个页面。我们可以通过useNavigate钩子来实现路由跳转。

const Home = () => {
  const navigate = useNavigate()

  const handleClick = () => {
    navigate('/about')
  }

  return <h1>
    <button onClick={handleClick}>
      Go to About
    </button>
  </h1>
}