React 路由器

Create React App 不包括页面路由。

React Router 是最流行的解决方案。

添加React路由器

要在应用程序中添加 React Router，请从应用程序的根目录在终端中运行以下命令：

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>s 可以嵌套。首先<Route>有一条路径/并呈现Layout成分。

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

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

设置path到*将作为任何未定义 URL 的包罗万象。这对于 404 错误页面来说非常有用。

页面/组件

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

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

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

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

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

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;