动态路由模式与编程式路由模式

动态路由模式

动态路由是根据不同的URL，可以访问同一个组件。在React路由中，通过path字段来指定动态路由的写法。

{
    path: 'foo/:id',
    element: <Foo />
}

其中id就是变量名，可以在组件中用useParams来获取到对应的值。

import { useParams } from 'react-router-dom'
export default function Foo() {
  const params = useParams()
  return (
    <div>Foo, { params.id }</div>
  )
}

带样式的声明式路由NavLink

跟组件的区别就是，可以添加样式。

import { Outlet, NavLink } from 'react-router-dom'
export default function About() {
	return (
        <div>
            <NavLink to="/about/foo/123">foo 123</NavLink> | <NavLink to="/about/foo/456">foo 456</NavLink>
        </div>
   	)
}

默认的样式名为.active，需要在对应的css文件中引入。

.active{
  background: red;
  color: white;
}

当然也可以自定义选择器的名字，代码如下：

import { Outlet, NavLink } from 'react-router-dom'
export default function About() {
	return (
        <div>
            <NavLink to="/about/foo/123" className={({isActive})=> isActive ? 'active2' : '' }>foo 123</NavLink> | <NavLink to="/about/foo/456" className={({isActive})=> isActive ? 'active2' : '' }>foo 456</NavLink>
        </div>
   	)
}

这时选择器变成了.active2。

编程式路由

编程式路由是需要在JS逻辑中进行调用的跳转路由的方式。

import { Outlet, useNavigate } from 'react-router-dom'
export default function About() {
    const navigate = useNavigate()
    const handleClick1 = () => {
        navigate('/about/foo/123')
    }
    const handleClick2 = () => {
        navigate('/about/foo/456')
    }
    const handleClick3 = () => {
        navigate('/about/bar')
    }
	return (
        <div>
            <button onClick={handleClick1}>foo 123</button> | <button onClick={handleClick2}>foo 456</button> | <button onClick={handleClick3}>bar</button>
        </div>
   	)
}

这样就可以更加灵活的控制触发的时机以及触发元素的样式。