中级：使用 React Router 进行路由

路由是构建现代 Web 应用程序的一个重要方面。 React Router 是一个功能强大的库，使开发人员能够有效地处理 React 应用程序中的客户端路由。本指南将深入研究设置 React Router 的基础知识、使用基本组件，并探索高级路由技术，例如嵌套路由、动态路由、路由参数和路由防护。

React 路由器简介

React Router 允许您根据 URL 管理不同组件的导航和渲染。它有助于构建具有无缝导航体验的单页应用程序 (SPA)。

设置 React 路由器

要开始使用React Router，请使用npm 或yarn 安装它。

npm install react-router-dom

或

yarn add react-router-dom

路由、交换机、链接和 NavLink 组件

React Router 提供了几个用于定义路由和处理导航的核心组件。

路线组件

Route 组件用于定义路径并将其与组件关联。

示例：

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

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

export default App;

本例中，当路径为 / 时渲染 Home 组件，当路径为 /about 时渲染 About 组件。

开关元件

Switch 组件确保仅渲染第一个匹配的路由。

示例：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

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

export default App;

在此示例中，如果没有路由匹配，则渲染 NotFound 组件。

链接组件

链接组件在您的应用程序中创建导航链接，类似于锚点 () 标签，但无需重新加载页面。

示例：

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

const App = () => {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
};

export default App;

在此示例中，单击链接即可导航到相应的路线，而无需重新加载页面。

导航链接组件

NavLink 组件与 Link 组件类似，但提供基于活动路线的附加样式功能。

示例：

import React from 'react';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
import Home from './Home';
import About from './About';

const App = () => {
  return (
    <Router>
      <nav>
        <NavLink exact to="/" activeClassName="active">
          Home
        </NavLink>
        <NavLink to="/about" activeClassName="active">
          About
        </NavLink>
      </nav>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
};

export default App;

在此示例中，activeClassName 属性将活动类应用于与当前路由匹配的链接。

先进的路由技术

嵌套路由

嵌套路线允许您在其他路线中创建路线，从而实现导航的分层结构。

示例：

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

const Topic = ({ match }) => <h3>Requested Topic ID: {match.params.topicId}</h3>;

const Topics = () => {
  let { path, url } = useRouteMatch();
  return (
    <div>
      <h2>Topics</h2>
      <ul>
        <li>
          <Link to={`${url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${url}/props-v-state`}>Props v. State</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path={path}>
          <h3>Please select a topic.</h3>
        </Route>
        <Route path={`${path}/:topicId`} component={Topic} />
      </Switch>
    </div>
  );
};

const App = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/topics">Topics</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path="/">
          <h2>Home</h2>
        </Route>
        <Route path="/topics" component={Topics} />
      </Switch>
    </div>
  </Router>
);

export default App;

在此示例中，主题组件包含嵌套路由，允许在主题部分内使用子导航系统。

动态路由

动态路由允许您基于动态参数（例如用户 ID 或产品 ID）创建路由。

示例：

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

const User = ({ match }) => <h3>User ID: {match.params.userId}</h3>;

const App = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/user/1">User 1</Link>
        </li>
        <li>
          <Link to="/user/2">User 2</Link>
        </li>
      </ul>
      <Switch>
        <Route path="/user/:userId" component={User} />
      </Switch>
    </div>
  </Router>
);

export default App;

在此示例中，用户组件使用作为路由参数传递的用户 ID 进行渲染。

路由参数

路由参数允许您从 URL 捕获值并在组件中使用它们。

示例：

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

const Product = ({ match }) => <h3>Product ID: {match.params.productId}</h3>;

const App = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/product/101">Product 101</Link>
        </li>
        <li>
          <Link to="/product/202">Product 202</Link>
        </li>
      </ul>
      <Switch>
        <Route path="/product/:productId" component={Product} />
      </Switch>
    </div>
  </Router>
);

export default App;

在此示例中，Product 组件使用productId 路由参数来显示产品 ID。

路由守卫和重定向

路由防护和重定向可帮助您根据条件（例如用户身份验证）控制对某些路由的访问。

保护路线

为了保护路由，您可以创建一个高阶组件 (HOC)，在渲染组件之前检查条件（例如，用户身份验证）。

示例：

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

const isAuthenticated = false;

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

const Dashboard = () => <h3>Dashboard</h3>;
const Login = () => <h3>Login</h3>;

const App = () => (
  <Router>
    <div>
      <PrivateRoute path="/dashboard" component={Dashboard} />
      <Route path="/login" component={Login} />
    </div>
  </Router>
);

export default App;

在此示例中，PrivateRoute 组件在渲染 Dashboard 组件之前检查用户是否已通过身份验证。如果用户未通过身份验证，他们将被重定向到登录组件。

在 React Router 中实现重定向

可以使用重定向组件来实现重定向，以编程方式将用户导航到不同的路线。

示例：

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

const OldPage = () => <h3>Old Page (will redirect)</h3>;
const NewPage = () => <h3>New Page</h3>;

const App = () => (
  <Router>
    <Switch>
      <Route path="/old-page">
        <Redirect to="/new-page" />
      </Route>
      <Route path="/new-page" component={NewPage} />
    </Switch>
  </Router>
);



export default App;

在此示例中，访问 /old-page 将自动将用户重定向到 /new-page。

结论

理解和使用 React Router 实现路由对于构建健壮的 React 应用程序至关重要。通过掌握设置路由、使用 Link 和 NavLink 处理导航的基础知识，以及实现嵌套路由、动态路由、路由参数和路由防护等高级技术，您可以在应用程序中创建无缝且安全的导航体验。随着您继续发展您的技能，这些概念将成为您使用 React 构建复杂的单页应用程序的能力的基础。

以上是中级：使用 React Router 进行路由的详细内容。更多信息请关注PHP中文网其他相关文章！