React-Router V6 - 构建SPA的强大工具

2023-09-25 03:33:06

使用 React-Router V6

引言

React-Router 是一个强大的工具，可帮助你构建单页面应用程序（SPA）。它是一个声明式路由库，允许你轻松地定义应用程序的路由并将其与组件关联起来。React-Router v6 是该库的最新版本，它带来了一些重大变化，包括对动态路由和嵌套路由的支持，以及更简单的 API。

安装

npm install react-router-dom

在你的应用程序中导入 React-Router v6：

import { BrowserRouter, Routes, Route } from 'react-router-dom';

使用

在你的应用程序中创建一个 <BrowserRouter> 组件，并将其包裹在你的应用程序组件中。<BrowserRouter> 组件将为你的应用程序启用路由。

import { BrowserRouter, Routes, Route } from 'react-router-dom';

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
};

在 <Routes> 组件中，你可以定义你的应用程序的路由。每个 <Route> 组件都有一个 path 属性，该属性指定路由的路径。<Route> 组件还可以有一个 element 属性，该属性指定与路由关联的组件。

动态路由

React-Router v6 支持动态路由。动态路由允许你根据 URL 中的参数来渲染不同的组件。例如，你可以使用动态路由来渲染特定文章或产品的页面。

import { BrowserRouter, Routes, Route } from 'react-router-dom';

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/articles/:id" element={<Article />} />
      </Routes>
    </BrowserRouter>
  );
};

在上面的示例中，<Route> 组件的 path 属性使用冒号 (:) 来指定一个动态路由。动态路由的名称为 id。在渲染 <Article> 组件时，你可以使用 useParams() 钩子来访问动态路由的参数。

import { useParams } from 'react-router-dom';

const Article = () => {
  const params = useParams();

  const articleId = params.id;

  return (
    <div>
      <h1>Article {articleId}</h1>
    </div>
  );
};

嵌套路由

React-Router v6 还支持嵌套路由。嵌套路由允许你创建嵌套的路由结构。例如，你可以创建一个路由来渲染一个博客的页面，并在该路由中嵌套一个路由来渲染特定文章的页面。

import { BrowserRouter, Routes, Route } from 'react-router-dom';

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/blog" element={<Blog />} />
        <Route path="/blog/:id" element={<Article />} />
      </Routes>
    </BrowserRouter>
  );
};

import { useParams } from 'react-router-dom';

const Article = () => {
  const params = useParams();

  const articleId = params.id;

  return (
    <div>
      <h1>Article {articleId}</h1>
    </div>
  );
};