最新版 React Router V5 用法总结

React Router V5 的安装

npm install react-router-dom

React Router V5 的基本用法

import { BrowserRouter, Route, Link } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>

      <hr />

      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </BrowserRouter>
  );
};

React Router V5 的高级用法

• 路由参数：可以使用 useParams 钩子来获取路由参数。

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

const About = () => {
  const { id } = useParams();

  return (
    <div>
      <h1>About</h1>
      <p>User ID: {id}</p>
    </div>
  );
};

• 路由守卫：可以使用 useAuth 钩子来实现路由守卫。

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

const PrivateRoute = ({ component: Component, ...rest }) => {
  const auth = useAuth();

  return (
    <Route {...rest} render={(props) => (
      auth.isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
    )} />
  );
};

React Router V5 的总结

React Router V5 是一个强大的 JavaScript 路由库，用于构建单页应用。它提供了多种功能，包括路由切换、路由参数、路由守卫等。本文对 React Router V5 的用法进行了总结，以便读者快速上手。