正文

从零开始，掌握React Router 4历史API，轻松实现页面跳转与状态管理

/0 浏览量
0624

前言

随着前端应用日益复杂，单页面应用（SPA）已经成为主流的开发模式。React Router 是一个在 React 应用中用于页面路由和组件切换的库。React Router 4 带来了新的功能和更好的体验。本文将从零开始，详细介绍 React Router 4 历史API，帮助你轻松实现页面跳转与状态管理。

一、React Router 4 简介

React Router 4 是 React Router 的最新版本，相较于之前版本，它具有以下特点：

  • 使用<Router>组件作为根组件，使应用成为路由型应用。
  • 使用<Switch>组件替代<Route>组件，提高匹配效率。
  • 提供了新的API，如<Redirect>、<BrowserRouter>和<HashRouter>等。

二、React Router 4 安装

在开始使用 React Router 4 之前，你需要安装它。以下是在项目中安装 React Router 4 的命令：

npm install react-router-dom

三、React Router 4 基本使用

1. 创建路由

在 React 应用中，路由是通过<Route>组件来实现的。以下是一个简单的路由示例：

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

const Home = () => <div>首页</div>;
const About = () => <div>关于我们</div>;

const App = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">首页</Link>
        </li>
        <li>
          <Link to="/about">关于我们</Link>
        </li>
      </ul>
      <Switch>
        <Route path="/" component={Home} exact />
        <Route path="/about" component={About} />
      </Switch>
    </div>
  </Router>
);

export default App;

在上面的代码中，我们创建了两个路由：首页和关于我们。<Switch>组件用于匹配多个<Route>组件，并且只渲染第一个匹配成功的组件。

2. 页面跳转

React Router 4 提供了多种页面跳转方法：

  • 使用<Link>组件实现页面跳转：
import React from 'react';
import { BrowserRouter as Router, Link } from 'react-router-dom';

const Home = () => <div>首页</div>;
const About = () => <div>关于我们</div>;

const App = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">首页</Link>
        </li>
        <li>
          <Link to="/about">关于我们</Link>
        </li>
      </ul>
      <Switch>
        <Route path="/" component={Home} exact />
        <Route path="/about" component={About} />
      </Switch>
    </div>
  </Router>
);

export default App;
  • 使用<Redirect>组件实现页面跳转：
import React from 'react';
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';

const Home = () => <div>首页</div>;
const About = () => <div>关于我们</div>;
const NotFound = () => <div>404页面</div>;

const App = () => (
  <Router>
    <div>
      <Switch>
        <Route path="/" component={Home} exact />
        <Route path="/about" component={About} />
        <Redirect from="*" to="/404" />
        <Route path="/404" component={NotFound} />
      </Switch>
    </div>
  </Router>
);

export default App;

在上面的代码中，如果用户访问除/和/about以外的路径，都会被重定向到404页面。

四、React Router 4 状态管理

React Router 4 提供了history对象，用于处理状态管理。以下是一些常见的使用场景：

1. 使用history.push实现页面跳转

import React from 'react';
import { BrowserRouter as Router, Route, useHistory } from 'react-router-dom';

const Home = () => {
  const history = useHistory();
  const gotoAbout = () => {
    history.push('/about');
  };

  return <button onClick={gotoAbout}>关于我们</button>;
};

const About = () => <div>关于我们</div>;

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

export default App;

在上面的代码中，我们通过调用history.push方法实现了页面跳转。

2. 使用history.location获取当前路由信息

import React from 'react';
import { BrowserRouter as Router, Route, useHistory } from 'react-router-dom';

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

  return (
    <div>
      <h1>当前路径：{location.pathname}</h1>
    </div>
  );
};

const App = () => (
  <Router>
    <Switch>
      <Route path="/" component={Home} />
    </Switch>
  </Router>
);

export default App;

在上面的代码中，我们通过调用history.location获取当前路由信息。

五、总结

通过本文的介绍，相信你已经掌握了 React Router 4 历史API的基本用法，包括页面跳转和状态管理。在实际开发中，React Router 4 能够帮助你构建更复杂、更健壮的单页面应用。希望本文能为你提供帮助！

-- 展开阅读全文 --