首页手记 Pages Router学习：新手入门教程

Pages Router学习：新手入门教程

标签：

Node.js React.JS Vue.js

概述

本文详细介绍了Pages Router的功能、优势以及如何安装和配置，同时提供了丰富的示例代码帮助读者更好地理解Pages Router。通过配置路由规则，Pages Router可以实现页面的动态切换和组件加载，适用于React、Vue等前端框架构建的单页面应用（SPA）。

Pages Router简介

什么是Pages Router

Pages Router 是一个路由管理工具，主要应用于现代前端开发中，特别是在React、Vue等框架构建的单页面应用（SPA）中。它通过配置路由规则，根据不同的URL路径动态加载和渲染组件，实现页面的切换和交互。

Pages Router的功能

动态加载组件：Pages Router的核心功能之一是组件的动态加载，确保只在需要时加载对应的组件，从而减少初始加载时间，提高应用性能。
懒加载：配置懒加载功能，使得组件仅在用户导航到特定页面时才加载，对于大型应用尤为重要。
面向组件化开发：Pages Router鼓励以组件化的方式进行开发，方便代码维护和扩展。
路由守卫与权限控制：通过路由守卫，可以对不同页面的访问权限进行控制，如检查用户是否登录或是否有权限访问。
浏览器历史记录操作：支持浏览器历史记录，如前进、后退等，提供更自然的用户体验。

Pages Router的作用和优点

Pages Router的主要优势包括动态加载组件、懒加载、面向组件化开发、路由守卫与权限控制以及浏览器历史记录操作，这些功能使得SPA开发更加高效和灵活。

Pages Router与传统路由的区别

传统路由通常用于多页面应用（MPA），每个页面都是独立的HTML文件，通过不同的URL加载不同的HTML页面。而Pages Router主要用于SPA，整个应用只有一个HTML文件，通过JavaScript动态加载和渲染不同的组件来实现页面切换。

在SPA中，Pages Router不仅负责导航，还涉及页面状态管理、组件生命周期等复杂问题。因此，Pages Router提供了更丰富的功能，如懒加载、路由守卫、编程式导航等。

代码示例

// 传统路由示例
<a href="http://example.com/about">About Us</a>

// Pages Router示例
<Link to="/about">About Us</Link>

安装与配置Pages Router

如何安装Pages Router

Pages Router通常被集成到React或Vue等前端框架中。这里以React为例，介绍如何安装Pages Router。

首先，你需要安装React和React Router。通过npm或yarn安装React Router。

npm install react-router-dom
# 或者使用yarn
yarn add react-router-dom

基本配置步骤

安装完成后，在项目中引入react-router-dom中的必要模块并配置路由。

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>

        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </div>
    </Router>
  );
}

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

创建第一个路由示例

假设你有一个React应用，想要在应用中添加一个简单的路由功能。步骤如下：

安装react-router-dom。
在应用中引入并配置Router、Route、Switch等组件。
定义路由规则，根据不同的路径渲染不同的组件。

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </div>
    </Router>
  );
}

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

示例代码解释

Router：包裹整个应用，使其支持路由功能。
Route：定义具体的路由规则，例如<Route exact path="/" component={Home} />表示访问根路径/时渲染Home组件。
Switch：确保只有一个Route被匹配并渲染。
Link：在应用内部创建链接，点击链接时触发路由跳转，不会刷新整个页面。

高级配置示例

除了基本配置外，还可以设置更复杂的路由配置，如懒加载：

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import React.lazy from 'react/forwardRef';

const lazyHome = React.lazy(() => import('./Home'));
const lazyAbout = React.lazy(() => import('./About'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={lazyHome} />
          <Route path="/about" component={lazyAbout} />
        </Switch>
      </Suspense>
    </Router>
  );
}

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

示例代码解释

React.lazy：用于懒加载组件，仅在需要时加载组件。
Suspense：展示加载提示，确保组件加载时不会导致UI卡顿。

基础路由设置

路由的基本语法

在React Router中，路由的基本语法如下：

<Route path="/path" component={MyComponent} />

path：指定路由路径，例如"/"表示根路径。
component：指定渲染的组件。
exact：确保路径严格匹配，例如exact path="/"只匹配根路径/，而不会匹配/user这样的路径。

示例代码

import React from 'react';
import { Switch, Route } from 'react-router-dom';

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

示例代码解释

exact：确保路径严格匹配。
path：定义路由路径。
component：指定在匹配路由时渲染的组件。

动态路由的应用

动态路由允许路径中包含变量，定义一个用户详情页面的路由/:username，当用户访问/user/john时，渲染与john相关的用户详情。

示例代码

import React from 'react';
import { Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/user/:username" component={UserDetail} />
    </Switch>
  );
}

function UserDetail({ match }) {
  const { username } = match.params;
  return <div>User: {username}</div>;
}

export default App;

示例代码解释

/:username：定义动态路由，username是动态参数。
match.params：通过match.params获取路径中的具体参数值。

路由参数的命名

路由参数可以命名为任意名称，例如:id、:name等，用于传递用户ID或用户名。

示例代码

import React from 'react';
import { Route, Switch }.
import { Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/post/:postId" component={PostDetail} />
    </Switch>
  );
}

function PostDetail({ match }) {
  const { postId } = match.params;
  return <div>Post ID: {postId}</div>;
}

export default App;

示例代码解释

/:postId：定义动态路由，postId可以是任何字符串，通常传递唯一的ID。
match.params：获取路径中的具体参数值。

如何处理不同类型的参数

可以根据需要处理不同类型参数，例如整数、日期等，通常需要在组件中进行类型转换和验证。

示例代码

import React from 'react';
import { Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/year/:year" component={YearDetail} />
    </Switch>
  );
}

function YearDetail({ match }) {
  const { year } = match.params;
  const yearNumber = parseInt(year, 10);
  if (isNaN(yearNumber)) {
    return <div>Invalid year</div>;
  }
  return <div>Year: {yearNumber}</div>;
}

export default App;

示例代码解释

/:year：定义动态路由，year可以是任何字符串。
parseInt(year, 10)：将字符串year转换为整数。
isNaN(yearNumber)：检查转换后的值是否为NaN，如果是，则返回错误信息。

路由组件与视图

使用组件构建路由

构建路由时，通常使用组件定义不同的视图。每个路由规则对应一个组件，用户访问特定路径时，对应的组件会被渲染。

示例代码

import React from 'react';
import { Route, Switch } from 'react-router-dom';

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

function Home() {
  return <div>Home Page</div>;
}

function About() {
  return <div>About Page</div>;
}

export default App;

示例代码解释

Home：定义一个简单的Home组件，用于展示首页内容。
About：定义一个简单的About组件，用于展示关于页面内容。

路由视图的概念

路由视图指的是根据路径动态渲染的组件所展示的内容。例如，访问/about路径时，About组件会被渲染，展示关于页面的内容。

示例代码

import React from 'react';
import { Route, Switch } from 'react-router-dom';

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

function Home() {
  return <div>Welcome to Home Page</div>;
}

function About() {
  return <div>About Us</div>;
}

export default App;

示例代码解释

Home：定义一个简单的Home组件，用于展示首页内容。
About：定义一个简单的About组件，用于展示关于页面内容。

如何定义路由视图

定义路由视图通常通过在Route组件中指定渲染的组件来实现。例如，定义一个用户详情页面的路由/:username，对应的视图则是UserDetail组件。

示例代码

import React from 'react';
import { Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/user/:username" component={UserDetail} />
    </Switch>
  );
}

function UserDetail({ match }) {
  const { username } = match.params;
  return <div>User Detail: {username}</div>;
}

function Home() {
  return <div>Welcome to Home Page</div>;
}

export default App;

示例代码解释

UserDetail：定义一个简单的UserDetail组件，用于展示用户详情页面的内容。
match.params.username：通过match.params获取动态路由中的参数值。

实战演练：构建简单的应用

将学到的知识应用到实际项目中

现在你已经掌握了Pages Router的基本使用方法，接下来尝试构建一个简单的应用，包括首页、关于页面和用户详情页面。

项目结构

假设你已经有了一个基本的React应用，项目结构如下：

src/
  ├── App.js
  ├── Home.js
  ├── About.js
  ├── User.js
  └── index.js

示例代码

在App.js中定义路由和组件：

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import User from './User';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/user/john">User</Link>
            </li>
          </ul>
        </nav>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/user/:username" component={User} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

在Home.js、About.js和User.js中定义具体的组件：

// Home.js
function Home() {
  return <div>Welcome to Home Page</div>;
}

export default Home;

// About.js
function About() {
  return <div>About Us</div>;
}

export default About;

// User.js
import React from 'react';

function User({ match }) {
  const { username } = match.params;
  return <div>User Detail: {username}</div>;
}

export default User;

示例代码解释

Link：在导航栏中使用Link组件创建链接，点击链接时会触发路由跳转。
Switch：确保每次只有一个Route匹配并渲染。
Route：定义具体的路由规则，根据路径渲染不同的组件。
User组件：使用match.params获取路径中的动态参数值。

常见问题及解决办法

问题1：路由无法匹配

确保路径定义和实际访问路径一致。例如，定义了/user/:username，而实际访问路径为/user/john，则需要确保路径中包含:username的参数。

问题2：页面切换时组件没有更新

确保在组件中正确使用component属性，而不是直接使用函数组件作为Route的渲染内容。正确的写法是使用component属性，如<Route path="/about" component={About} />。

问题3：懒加载组件报错

确保组件的懒加载路径正确。例如，使用React.lazy和Suspense时，路径应指向组件的导出位置。

const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const User = React.lazy(() => import('./User'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/user/:username" component={User} />
        </Switch>
      </Suspense>
    </Router>
  );
}

解释

React.lazy：用于懒加载组件，确保只有在需要时加载组件。
Suspense：用于展示加载提示，确保组件加载时不会导致UI卡顿。

Pages Router学习的进阶方向

路由守卫

路由守卫允许你在导航到某个路由之前执行一些逻辑，例如检查用户是否登录，是否具有相应的权限等。

import { useLocation, useNavigate, Route, Switch } from 'react-router-dom';

function PrivateRoute({ component: Component, ...rest }) {
  const isLoggedIn = true; // 假设这里检查用户是否登录
  const location = useLocation();
  const navigate = useNavigate();

  if (!isLoggedIn) {
    navigate('/login', { state: { from: location } });
  }

  return <Route {...rest} render={(props) => <Component {...props} />} />;
}

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/login" component={Login} />
        <PrivateRoute path="/dashboard" component={Dashboard} />
      </Switch>
    </Router>
  );
}

动态路由

动态路由允许你根据路径中的参数动态渲染不同的内容，如用户详情页面/:username。

嵌套路由

嵌套路由是指在一个路由组件内部定义子路由。例如，定义一个用户详情页面，在该页面中嵌套用户帖子列表和用户信息等子路由。

import React from 'react';
import { Route, Switch, Link } from 'react-router-dom';

function User({ match }) {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to={`${match.url}/posts`}>Posts</Link>
          </li>
          <li>
            <Link to={`${match.url}/info`}>Info</Link>
          </li>
        </ul>
      </nav>
      <Switch>
        <Route exact path={match.url} component={UserPosts} />
        <Route path={`${match.url}/posts`} component={UserPosts} />
        <Route path={`${match.url}/info`} component={UserInfo} />
      </Switch>
    </div>
  );
}

function UserPosts() {
  return <div>User Posts</div>;
}

function UserInfo() {
  return <div>User Info</div>;
}

代码拆分与懒加载

通过使用React.lazy和Suspense，可以实现组件的按需加载，提高应用性能。


const HomeComponent = React.lazy(() => import('./Home'));
const AboutComponent = React.lazy(() => import('./About'));
const UserComponent = React.lazy(() => import('./User'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route path="/" component={HomeComponent} />
          <Route path="/about" component={AboutComponent} />
          <Route path="/user/:username" component={UserComponent} />
        </Switch>
      </Suspense>
    </Router>
  );
}
``

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

哔哔one

手记
篇

粉丝

94

获赞与收藏

544

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 31416 348

网络编程入门教程

20个小节 12873 242

Pandas 入门教程

25个小节 18755 351

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Pages Router学习：新手入门教程

Pages Router的功能

代码示例

示例代码解释

示例代码解释

示例代码

示例代码解释

示例代码

示例代码解释

示例代码

示例代码解释

示例代码

示例代码解释

示例代码

示例代码解释

示例代码

示例代码解释

示例代码

示例代码解释

项目结构

示例代码

示例代码解释

问题1：路由无法匹配

问题2：页面切换时组件没有更新

问题3：懒加载组件报错

解释

路由守卫

动态路由

嵌套路由

代码拆分与懒加载

阅读免费教程