React Router V4 实现单页应用的使用-JavaScript中文网-JavaScript教程资源分享门户

前言

React Router 作为 React 中最受欢迎的路由库之一，已经进入了第四个重要版本。非常适合于开发单页应用程序并且可以帮助通过链接导航实现复杂的 UI。

在本篇文章中，我将会详细地介绍 React Router V4 的使用，其中涵盖了所有重要概念，基本用法和高级用法，并通过实例代码进行演示。

基本概念

React Router V4 的基本概念包括 Route、History 和 Location 。

Route

Route 是一个 React 组件，它决定在 URL 匹配时哪一个组件该渲染。每一个 Route 组件包含的属性包括：

path ：匹配 URL ，如果 URL 匹配 path 则该 Route 组件将会被渲染。
component ：指定在 URL 匹配 path 时应该渲染的组件。

Location

Location 是一个 JavaScript 对象，包含了浏览器地址栏中当前页面的 URL 。

在 React Router V4 中，location 对象分为两个不同类型：

Browser history ：对应浏览器的地址栏。
Memory history ：不管浏览器的地址栏如何，始终匹配指定的 path 和 location 。

基本用法

安装 React Router

在 React 应用程序中使用 React Router ，需要通过 npm 安装 react-router-dom 。

npm install react-router-dom --save

Router 组件

在 React Router V4 中，所有的路由配置都要通过 Router 组件来完成。Router 有两种类型：BrowserRouter 和 HashRouter 。BrowserRouter 应该在处理动态地址时使用，例如：您的项目放在 Apache/nginx 后，/user/1 这个地址被认为是一个静态文件，但我们要通过 React Router 的配置来让其显示指定的组件；而 HashRouter 则应该在服务器仅支持静态页面的情况下使用。

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

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

Route 组件

Route 组件是 React Router V4 配置路由的核心。在一个 app 中，可以使用多个 Route 组件作为 URL 匹配的规则。

// javascriptcn.com 代码示例
import { Route } from 'react-router-dom';

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

Link 组件

Link 组件用于创建 URL 链接，实现页面之间的导航。

// javascriptcn.com 代码示例
import { Link } from 'react-router-dom';

const Navigation = () => (
  <nav>
    <ul>
      <li><Link to="/">首页</Link></li>
      <li><Link to="/about">关于我们</Link></li>
    </ul>
  </nav>
)

withRouter

withRouter 是一个高阶组件，它接收一个组件并返回一个新的组件，使得传递给原始组件的 props 中包含了 router 的 history 和 location 。

import { withRouter } from 'react-router-dom';

const Button = withRouter(({ history }) => (
  <button onClick={() => { history.push('/list') }}>
    跳转至列表
  </button>
));

高级用法

代码分割

React Router V4 中引入了路由级别的代码分割功能，可以将代码分割成更小的部分，优化重复加载。你可以使用 React.lazy 和 Suspense 组件完成代码分割。

// javascriptcn.com 代码示例
import React, { lazy, Suspense } from 'react';
import { Route } from 'react-router-dom';

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

const App = () => (
  <div>
    <Suspense fallback={<div>正在加载...</div>}>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Suspense>
  </div>
)

嵌套路由

React Router V4 允许您在一个父级 Route 内部嵌套子级 Route ，从而建立嵌套的应用程序。

// javascriptcn.com 代码示例
import { Route } from 'react-router-dom';

const App = () => (
  <div>
    <nav>
      <ul>
        <li><Link to="/">首页</Link></li>
        <li><Link to="/about">关于我们</Link></li>
      </ul>
    </nav>

    <div className="content">
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
      <Route path="/blog" component={Blog} />
      <Route path="/blog/:slug" component={Post} />
    </div>
  </div>
)

重定向和未知路由

重定向和未知路由都是在处理路由时非常重要的。您可以通过 Redirect 组件来实现重定向，而未知路由则可以直接渲染一个 404 界面。

// javascriptcn.com 代码示例
import { Route, Redirect, Switch } from 'react-router-dom';

const App = () => (
  <div>
    <nav>
      <ul>
        <li><Link to="/">首页</Link></li>
        <li><Link to="/about">关于我们</Link></li>
      </ul>
    </nav>

    <div className="content">
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/blog" component={Blog} />
        <Route path="/blog/:slug" component={Post} />
        <Redirect from="/archives" to="/blog" />
        <Route component={NotFound} />
      </Switch>
    </div>
  </div>
)

总结

React Router V4 是 React 应用程序中最受欢迎和最强大的路由库之一。在本文中，我们介绍了 React Router V4 的基本概念，基本用法和高级用法，并演示了实例代码。

React Router 是一个非常强大的库，它可以帮助您构建更好的单页应用程序，同时从代码分割到嵌套路由、重定向和未知路由都有完整的支持。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653f3b6e7d4982a6eb8c3173