React 教程 / Router

Router

创建 React App 不包括页面路由。

React 路由是最流行的解决方案。

添加 React 路由

要在您的应用程序中添加 React 路由，请从应用程序的根目录在终端中运行:

npm i -D react-router-dom

注意:本教程使用 React Router v6。

如果您是从 v5 升级，则需要使用 @latest 标志:

npm i -D react-router-dom@latest

文件夹结构

要创建具有多个页面路由的应用程序，我们首先从文件结构开始。

在 src 文件夹中，我们将创建一个名为 pages 的文件夹，其中包含几个文件:

src\pages\:

Layout.js
Home.js
Blogs.js
Contact.js
NoPage.js

每个文件都将包含一个非常基本的 React 组件。

基本用法

现在我们将在 index.js 文件中使用我们的路由器。

实例

使用 React Router 根据 URL 路由到页面:

index.js:

import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="blogs" element={<Blogs />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

运行实例 »

示例说明

我们首先用 <BrowserRouter> 包装我们的内容。

然后我们定义我们的 <Routes>。一个应用程序可以有多个 <Routes>。我们的基本示例只使用了一个。

<Route> 可以嵌套。第一个<Route>的路径是/，渲染Layout组件。

嵌套的 <Route> 继承并添加到父路由。所以 blogs 路径与父路径合并成为 /blogs。

Home 组件路由没有路径，但有一个 index 属性。将这条路由指定为父路由的默认路由，即 /。

将 path 设置为 * 将充当任何未定义 URL 的全部内容。这对于 404 错误页面非常有用。

页面/组件

Layout 组件有 <Outlet> 和 <Link> 元素。

<Outlet> 渲染当前选择的路线。

<Link> 用于设置 URL 并跟踪浏览历史记录。

每当我们链接到内部路径时，我们都会使用 <Link> 而不是 <a href="">。

"布局路由"是一个共享组件，在所有页面上插入通用内容，例如导航菜单。

Layout.js:

import { Outlet, Link } from "react-router-dom";

const Layout = () => {
  return (
    <>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/blogs">Blogs</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

      <Outlet />
    </>
  )
};

export default Layout;

Home.js:

const Home = () => {
  return <h1>Home</h1>;
};

export default Home;

Blogs.js:

const Blogs = () => {
  return <h1>Blog Articles</h1>;
};

export default Blogs;

Contact.js:

const Contact = () => {
  return <h1>Contact Me</h1>;
};

export default Contact;

NoPage.js:

const NoPage = () => {
  return <h1>404</h1>;
};

export default NoPage;

← 表单

React教程

React Hooks