React Router 中常用的方法总结

2024-04-14 1084阅读

在 React 中使用 React Router (V5版)可以实现类似于 Vue Router 的路由跳转、获取参数和编程式导航、获取路由对象等功能。以下是一些常用的方法:

React Router 中常用的方法总结
(图片来源网络,侵删)
  1. 编程式导航:您可以使用 useHistory 钩子进行编程式导航。以下是一个示例:
import { useHistory } from "react-router-dom";
function HomeButton() {
  let history = useHistory();
  function handleClick() {
    history.push("/home");
  }
  return (
    handleClick}
      回到首页
    
  );
}
  1. 重定向:您可以使用 Redirect 组件将用户重定向到不同的页面。以下是一个示例:
import { Redirect } from "react-router-dom";
function LoginPage() {
  // ... 登录逻辑
  return (
    
{isLoggedIn ? : }
); }
  1. 前进或后退:您可以使用 useHistory 钩子中的 goBack 和 goForward 函数实现前进和后退。以下是一个示例:
import { useHistory } from "react-router-dom";
function BackButton() {
  let history = useHistory();
  function handleClick() {
    history.goBack();
  }
  return (
    handleClick}
      后退
    
  );
}
function ForwardButton() {
  let history = useHistory();
  function handleClick() {
    history.goForward();
  }
  return (
    handleClick}
      前进
    
  );
}
  1. 获取 URL 中的参数:您可以使用 useParams 钩子获取 URL 中的参数。以下是一个示例:
import { useParams } from "react-router-dom";
function UserDetails() {
  let { userId } = useParams();
  return (
    

User ID: {userId}

); }
  1. 获取路由信息对象:您可以使用 useRouteMatch 钩子获取有关路由的信息。以下是一个示例:
import { useRouteMatch } from "react-router-dom";
function About() {
  let match = useRouteMatch();
  return (
    

About

You are now on the "About" page.

The URL matched is {match.path}.

); }
  1. 嵌套路由:您可以使用 Route 组件的 path 属性和 children 属性创建嵌套路由。以下是一个示例:
import { Route, Switch } from "react-router-dom";
function App() {
  return (
    
      Admin}
        Dashboard} /
        Settings} /
      
    
  );
}
  1. 守卫路由:您可以使用 Route 组件的 render 属性或 useEffect 钩子来实现路由守卫。以下是一个示例:
import { Route, Redirect } from "react-router-dom";
function PrivateRoute({ component: Component, ...rest }) {
  const isAuthenticated = // ... 检查用户是否已登录
  return (
    ...rest}
      render={props =
        isAuthenticated ? (
          ...props} /
        ) : (
          
        )
      }
    />
  );
}
VPS购买请点击我

文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。

目录[+]