React Router5 的使用及 API 分析-JavaScript中文网-JavaScript教程资源分享门户

React Router是React社区中最受欢迎的路由库之一。它提供了一种强大且灵活的方式来管理一个React应用程序中的URL。当您需要将一个多页面应用的URL映射到React组件树的某些部分时，React Router是一个不可缺少的工具。

在本文中，我们将介绍 React-Router5，这是React Router库的一个新版本。我们将深入了解React Router5的各种API，并给出一些使用React Router5的最佳实践。

安装 React-Router5

首先，我们需要安装React Router5，使用npm在终端或命令行工具中运行以下命令：

npm install react-router-dom@5.x.x

基础概念

在使用React Router5之前，您需要了解一些基本概念：

Route

React Router5中的 Route 组件定义了URL和React组件之间的映射关系。

例如，如果您想将URL路径/about与一个名为About的组件关联起来，您可以使用以下代码：

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

function App() {
  return (
    <div>
      <Route path="/about" component={About} />
    </div>
  );
}

这里需要注意的是 component 属性，并不是 props，需要另外引入。

具体来说，Route组件渲染一个React组件并将调用该组件的路由信息传递给该组件。

Link

React Router5中的 Link 组件用于在应用程序中导航到另一个URL。下面是一个例子：

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

function App() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

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

这里注意 to 这个属性，给出的字符串参数就是导航到的路径。

Switch

React Router5中的 Switch 组件用于在一个或多个Route组件之间进行选择。当有多个路由匹配时，Switch从上到下遍历匹配的所有组件，找到第一个匹配的组件并呈现它。这是一个例子：

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

function App() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

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

在上面的例子中，如果用户访问/about，则Route将通过Switch组件找到第一个匹配的组件（About）并呈现它。如果用户访问/或/contact，则匹配相应的Route并呈现Home或Contact组件。

Redirect

React Router5中的 Redirect 组件用于重定向到另一个URL。例如，此代码将用户从/home重定向到/about：

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

function App() {
  return (
    <div>
      <Route exact path="/home">
        <Redirect to="/about" />
      </Route>
      <Route path="/about" component={About} />
    </div>
  );
}

useParams

React Router5中的 useParams hook可以帮助您在React组件中获取URL参数的值。下面是一个例子：

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

function UserProfile() {
  const { userId } = useParams();

  return (
    <div>
      <h1>User Profile</h1>
      <p>User ID: {userId}</p>
    </div>
  );
}

当你请求一个路径例如/user/123时，useParams hook 将{userId: 123}的对象传递给组件。然后，我们可以使用该对象中的值进行渲染。

API 分析

现在，我们将介绍React Router5的各种API并给出一些示例。

BrowserRouter 和 HashRouter

React Router5提供了两种类型的路由：BrowserRouter和 HashRouter。

BrowserRouter使用HTML5历史记录API来实现客户端导航，它需要一个支持历史记录API的现代浏览器。

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

HashRouter使用hash部分来实现导航，这种路由方法会兼容性更好。

import { HashRouter as Router, Link, Route } from 'react-router-dom';

在这两种路由方式中，Router 是必须的，而 Link 和 Route 则代表了我们之前提到过的组件。

Route

React Router5中的 Route 组件可以接收以下props：

path：与URL路径匹配的字符串或正则表达式。
exact：布尔值，表示是否需要严格匹配 path 和 pathname。
strict：布尔值，表示是否启用严格模式。
sensitive：布尔值，表示是否区分大小写。
component：一个React组件，它将在与URL路径匹配时呈现。
render：一个返回React元素的函数，可以根据需要进行自定义呈现。
children：一个函数，返回一个React元素，无论路由是否匹配都会呈现。
location：一个Location对象，用于与路由匹配。

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

function App() {
  return (
    <div>
      <Route exact path="/" component={Home} />
      <Route path="/about" render={() => <div>About Us</div>} />
      <Route path="/contact" children={({ match }) => match && <div>Contact Us</div>} />
    </div>
  );
}

在上面的例子中，使用了不同的方式呈现Route组件。 exact 明确表示模糊匹配，而 render 和 children 函数的使用则可以更加灵活。

Link

React Router5中的 Link 组件可以接收以下props:

to：一个字符串或者 location 对象，表示要导航到的 URL。
replace：一个布尔值，如果为 true，则使用与 push 功能相同的导航，因此在历史记录中不会创建新条目，而是将当前条目替换为新条目。
innerRef：一个回调函数，用于将 DOM 节点的引用传递给父组件。

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

function App() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About Us</Link>
          </li>
          <li>
            <Link to="/contact">Contact Us</Link>
          </li>
        </ul>
      </nav>
      // ......
    </div>
  );
}

在上面的例子中，我们将 Link 标签与 to 属性组合在一起来创建导航链接。

Switch

React Router5中的 Switch 组件没有 props，它只是对 Route 组件进行包装，确保只呈现一个匹配的路由。

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

function App() {
  return (
    <div>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </div>
  );
}

在上面的例子中，使用了 Switch 来确保只有一个路由被呈现。

Redirect

React Router5中的 Redirect 组件可以接收以下props：

to：一个字符串或 location 对象，表示重定向到的 URL。
push：一个布尔值，如果为 true，则使用 push 功能来导航，否则使用类似于 replace 的功能。

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

function App() {
  return (
    <div>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
      <Route path="/login" component={Login} />
      <Route path="/dashboard">
        {!isLoggedIn && <Redirect to="/login" />}
        <Dashboard />
      </Route>
    </div>
  );
}

在上面的示例代码中，如果用户未登录，则会将其重定向到 /login 路由。

useParams

React Router5中的 useParams hook可以用来接收URL参数的值。

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

function UserProfile() {
  const { userId } = useParams();

  return (
    <div>
      <h1>User Profile</h1>
      <p>User ID: {userId}</p>
    </div>
  );
}

在上面的示例代码中，我们使用useParams hook来查找传递给路由的URL参数。

总结

React Router5是一个非常强大的路由库，可以帮助您轻松地将URL映射到React组件树中的某些部分。在本文中，我们深入介绍了React Router5的各种API以及一些最佳实践，希望能够帮助您更好地使用React Router5来构建可扩展的Web应用程序。

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