React Router v6：现代网页应用的导航秘籍

前端

2023-01-19 05:22:20

React Router v6：打造无缝导航的现代网页应用

在当今数字化浪潮中，单页面应用（SPA）已成为构建现代网页应用的领军者。SPA 允许用户在应用内无缝切换，无需刷新整个页面。而 React Router v6 正是赋能开发人员构建复杂 SPA 的利器。

React Router v6 的核心概念

React Router v6 的基石在于以下概念：

路由组件： 负责解析 URL 和引导用户至相应页面。
URL： 唯一标识应用内不同页面或组件。
导航事件： 用户在应用内触发动作，导致页面切换。

React Router v6 的基本应用

安装 React Router v6：

npm install react-router-dom@6

配置路由：

import { BrowserRouter, Route, Switch } from "react-router-dom";

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

创建导航链接：

import { NavLink } from "react-router-dom";

const Header = () => {
  return (
    <header>
      <NavLink to="/about">About</NavLink>
    </header>
  );
};

React Router v6 的进阶用法

嵌套路由：

import { BrowserRouter, Route, Switch } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about">
          <Switch>
            <Route path="/about/team" component={Team} />
            <Route path="/about/contact" component={Contact} />
          </Switch>
        </Route>
      </Switch>
    </BrowserRouter>
  );
};

重定向：

import { Redirect } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Home} />
        <Redirect from="/old-page" to="/new-page" />
        <Route path="/new-page" component={NewPage} />
      </Switch>
    </BrowserRouter>
  );
};

动态路由：

import { BrowserRouter, Route, Switch } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/product/:id" component={Product} />
      </Switch>
    </BrowserRouter>
  );
};