React + React Router 实战：使用 React Router 构建新特性与 UI-FunTeaLearn Online Web Tutorials

前言

React 是一个广受欢迎的前端 JavaScript 框架，React Router 是 React 官方提供的路由管理库。React Router 提供了一种将组件映射到 URL 的简单方式，可以让我们更好地构建单页面应用（SPA）。本文将介绍如何使用 React Router 来构建新特性与 UI。

React Router 基础

我们先来了解一下 React Router 的基础知识。

安装 React Router

我们可以使用 npm 安装 React Router：

npm install react-router-dom

路由关系

React Router 的基础概念是路由关系，它将组件映射到 URL。一个路由关系可以由以下元素构成：

路径：URL 中的路径，默认为 "/"
组件：要渲染的组件
参数：URL 中的参数，可以通过 :param 定义

例如，我们可以创建一个简单的路由关系：

import { Route } from "react-router-dom";
import Component1 from "./Component1";

const routes = (
  <Route path="/" component={Component1} />
);

这里将根路径 / 映射到 Component1 组件。

路由组件

路由组件是 React 组件，可以通过 Route 组件渲染。路由组件通常有以下特点：

始终返回相同的输出，不会改变应用的状态
它可以接受路由参数和查询参数
它通常是一个纯函数组件

例如，下面是一个接受路由参数的路由组件：

import React from "react";

function User(props) {
  return <h1>Hello, {props.match.params.name}!</h1>;
}

export default User;

该组件将路由参数 name 渲染为标题。

路由器

React Router 提供了一个路由器组件 Router，可以用它来管理你应用的路由状态。

// www.javascriptcn.com code example
import { BrowserRouter as Router } from "react-router-dom";
import App from "./App";

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

使用 React Router 构建新特性与 UI

动态路由

动态路由是指一些通过参数提供不同数据的路由。例如，我们可以创建一个动态路由来显示不同用户的详细信息。

// www.javascriptcn.com code example
import { Route, Link } from "react-router-dom";
import User from "./User";

const users = [{ name: "Alice" }, { name: "Bob" }, { name: "Charlie" }];

function App() {
  return (
    <div>
      <ul>
        {users.map((user, index) => (
          <li key={index}>
            <Link to={`/user/${user.name}`}>{user.name}</Link>
          </li>
        ))}
      </ul>
      <Route path="/user/:name" component={User} />
    </div>
  );
}

export default App;

这里我们创建了一个包含用户列表的组件，并使用动态路由来展示不同用户的详细信息。

嵌套路由

在 React Router 中，路由并不是独立的，我们也可以创建嵌套路由。例如，我们可以创建一个包含子路由的 App 组件：

// www.javascriptcn.com code example
import { Route, Link } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
import User from "./User";

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>

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

export default App;

在这里，我们创建了一个由四个组件组成的应用程序，并使用 Route 组件将它们映射到特定的 URL。

// www.javascriptcn.com code example
import { Link } from "react-router-dom";

function Navbar() {
  return (
    <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>
  );
}

export default Navbar;

这里，我们使用 Link 组件来添加导航链接。

使用 React Router 跳转页面

我们可以使用 history 对象来在 React 组件中使用编程式导航。例如，我们可以在登录后将用户重定向到某个页面：

// www.javascriptcn.com code example
import { Redirect } from "react-router-dom";

function Login(props) {
  const [loggedIn, setLoggedIn] = useState(false);

  const handleLogin = () => {
    setLoggedIn(true);
    props.history.push("/dashboard");
  };

  if (loggedIn) {
    return <Redirect to="/dashboard" />;
  }

  return (
    <form>
      <button onClick={handleLogin}>Login</button>
    </form>
  );
}

export default Login;

这里我们使用 history 对象将用户重定向到 /dashboard 页面。

总结

本文介绍了 React Router 的基础知识以及如何使用 React Router 构建新特性与 UI。通过学习本文，你应该能够掌握 React Router 的基础知识，进一步提高你的 React 技能。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/646981ed968c7c53b0966c2a

React + React Router 实战：使用 React Router 构建新特性与 UI

前言