嵌套路由导航处理

当 URL 发生变化时，我们称之为 "导航"。在 React Router 中有两种导航方式：

<Link>
navigate

嵌套路由不仅可以呈现布局，还可以实现 "相对链接"。请看我们之前的 teams 路由：

<Route path="teams" element={<Teams />}>
  <Route path=":teamId" element={<Team />} />
</Route>

<Teams> 组件可以呈现类似的链接，例如：

<Link to="psg" />
<Link to="new" />
// 使用 navigate 就是
let navigate = useNavigate();
navigate("psg");

它链接的完整路径将是 /teams/psg 和 /teams/new 。
它们继承了渲染它们的路由。
这样，您的路由组件就不必真正了解应用程序中的其他路由。
大量链接只需再深入一个环节即可。
您可以重新整理整个路由配置，这些链接仍能正常工作。
这在网站建设初期，设计和布局发生变化时非常有价值。

导航函数

函数从 useNavigate 钩子返回，允许程序员随时更改 URL。您可以在超时时更改：

let navigate = useNavigate()
useEffect(() => {
  setTimeout(() => {
    navigate('/logout')
  }, 30000)
}, [])

或者在提交表单后：
<form onSubmit={event => {
  event.preventDefault();
  let data = new FormData(event.target)
  let urlEncoded = new URLSearchParams(data)
  navigate("/create", { state: urlEncoded })
}}>

除了链接和表单之外，很少有交互应该改变 URL，因为这会带来可访问性和用户期望方面的复杂性。

这是一个错误的示例：
<li onClick={() => navigate('/somewhere')} />

导航函数​

导航函数