让前端更酷炫！React-Router学习进阶篇，带你飞向新高度

新的征途——React学习之React-Router

前言：

进入今天主题之前，先来聊一聊随着前端发展，前端框架之间的相互借鉴学习，自一套前端框架的兴起，极大的提升了前端开发的效率，也极大的降低了前端项目的开发成本。前端框架功能的不断丰富，可以帮助我们快速、轻松地构建出复杂的用户界面和应用程序，让我们能够更专注于应用程序的逻辑和业务。

今天所要讨论的react-router就是其中不可或缺的一个，作为一个前端路由管理库，它可以帮助我们轻松地管理和控制单页面的路由，使我们能够构建出更加复杂和动态的应用程序。

一、基本使用：

1. 安装：

npm install react-router-dom

2. 创建路由：

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

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </BrowserRouter>
  );
};

export default App;

3. 导航：

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

const Nav = () => {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
};

export default Nav;

二、高级用法：

1. 动态路由：

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/:id" component={Post} />
      </Switch>
    </BrowserRouter>
  );
};

2. 嵌套路由：

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" component={Home} />
        <Route path="/about" component={About}>
          <Route path="/about/team" component={Team} />
          <Route path="/about/contact" component={Contact} />
        </Route>
      </Switch>
    </BrowserRouter>
  );
};

3. 路由传递参数：

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/post/:id" component={Post} />
      </Switch>
    </BrowserRouter>
  );
};

4. 路由导航：

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

const Home = () => {
  const history = useHistory();

  const handleClick = () => {
    history.push("/about");
  };

  return (
    <div>
      <h1>Home</h1>
      <button onClick={handleClick}>Go to About</button>
    </div>
  );
};

5. 路由守卫：

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

const PrivateRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={props =>
        localStorage.getItem("token") ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
};

6. 路由动画：

import { TransitionGroup, CSSTransition } from "react-transition-group";

const App = () => {
  return (
    <BrowserRouter>
      <TransitionGroup>
        <Switch>
          <Route path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </TransitionGroup>
    </BrowserRouter>
  );
};

7. 路由懒加载：

import { lazy, Suspense } from "react";

const Home = lazy(() => import("./Home"));
const About = lazy(() => import("./About"));

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Suspense fallback={<div>Loading...</div>}>
          <Route path="/" component={Home} />
          <Route path="/about" component={About} />
        </Suspense>
      </Switch>
    </BrowserRouter>
  );
};

8. 路由权限控制：

const App = () => {
  const user = JSON.parse(localStorage.getItem("user"));

  return (
    <BrowserRouter>
      <Switch>
        <Route path="/admin" render={() => (user && user.role === "admin" ? <Admin /> : <Redirect to="/login" />)} />
        <Route path="/user" render={() => (user ? <User /> : <Redirect to="/login" />)} />
        <Route path="/login" component={Login} />
      </Switch>
    </BrowserRouter>
  );
};

三、总结：

React-Router是一个强大的路由管理库，可以帮助我们轻松地管理和控制单页面的路由，使我们能够构建出更加复杂和动态的应用程序。本文介绍了React-Router的基本用法和高级用法，希望对您有所帮助。