反应路由器 6 导航 - Javascript

React Router是React的常用库之一，用于构建单页应用程序。React Router的版本6是新版本，其API已被简化和改进，使开发者更容易使用。

功能

React Router 6提供三个主要组件：

1. <BrowserRouter>：用于定义包裹在应用程序周围的路由器组件
2. <Route>：用于定义组件在不同路径下的渲染方式
3. <Link>：用于定义在应用程序中导航到其他路径的链接

对于这些组件，React Router 6提供了最新的useLocation、useParams和useNavigate hooks。

安装

React Router 6可以通过npm或yarn安装：

npm install react-router-dom@beta

或者

yarn add react-router-dom@beta

使用

定义路由

用 <Route>定义路由，包括在哪个路径下渲染哪个组件。

<Route path="/about" element={<About />} />

• path 属性为字符串，指定当前路由的路径。
• element 属性为JSX，指定要渲染的组件。

嵌套路由

在组件中可以嵌套其他路由。例如，在User页面中，我们想要添加一个嵌套路由。

function User() {
  return (
    <div>
      <h1>User</h1>
      <Outlet />
    </div>
  );
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/user" element={<User />}>
          <Route path="/" element={<UserProfile />} />
          <Route path="posts" element={<UserPosts />} />
          <Route path="comments" element={<UserComments />} />
        </Route>
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

在上面的代码中，我们在<User>组件中添加一个<Outlet>组件，用于渲染嵌套路由的内容。然后，我们再在<User>组件中定义几个子路由。

使用Link

使用 <Link> 组件创建一个可以点击的链接。

<Link to="/about">About</Link>

• to 属性为字符串，指定链接的路径。

使用useLocation

可以使用useLocation获取当前浏览器URL的位置，并将其用作其他组件或效果的输入。

import { useLocation } from "react-router-dom";

function MyComponent() {
  const location = useLocation();

  return <div>当前URL为: {location.pathname}</div>;
}

使用useParams

可以使用useParams获取路由参数。

import { useParams } from "react-router-dom";

function MyComponent() {
  let { id } = useParams();

  return <div>用户ID为：{id}</div>;
}

使用useNavigate

可以使用useNavigate程序性地导航到其他路径。

import { useNavigate } from "react-router-dom";

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

  function handleClick() {
    navigate("/about");
  }

  return <button onClick={handleClick}>About</button>;
}

结论

React Router 6 是 React 路由器常用库之一。它提供了一个简单的 API 用于构建单页应用程序，在新的版本中API已被简化和改进，使开发者更容易使用。 它是一个强大的工具，可以使Web应用程序的导航变得轻松且直观。