React路由与实践 | 青训营笔记

LUSNIA
56 阅读2分钟

React作为一个流行的前端框架，不仅提供了强大的组件化开发能力，还支持路由系统，让页面的跳转变得更加友好。本文将介绍React中路由的基础知识，并结合实际项目经验，分享一些路由实践技巧。

React路由基础

从React 16开始，React已经内置了一个名为"React Router"的路由库，可以帮助我们快速构建单页应用。在使用React Router之前，需要先安装该库：

npm install react-router-dom

React Router提供了三种类型的路由：BrowserRouter、HashRouter和MemoryRouter。其中，BrowserRouter和HashRouter是最常用的两种路由方式。

BrowserRouter

BrowserRouter基于HTML5的history API实现，支持在路径上添加任意数量的查询参数和片段标识符。使用BrowserRouter时，需要将所有URL请求都指向index.html文件，然后通过React Router来解析URL并加载正确的组件。

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

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

export default App;

上面的代码展示了如何使用BrowserRouter创建两个路由：/和/about，分别对应两个组件：Home和About。exact属性用于指定只有在路径为/时才能匹配到该路由。

HashRouter

HashRouter基于URL的hash部分实现，支持在路径上添加任意数量的查询参数和片段标识符。使用HashRouter时，需要将所有URL请求都指向index.html文件，并在URL中使用#符号来表示路径。

import React from 'react';
import { HashRouter, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

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

export default App;

上面的代码展示了如何使用HashRouter创建两个路由：/和/about，分别对应两个组件：Home和About。同样地，exact属性用于指定只有在路径为/时才能匹配到该路由。

Link组件

React Router提供了一个名为Link的组件，可以用于生成跳转链接。当用户点击该链接时，React Router将自动更改URL并加载对应的组件。

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

function Header() {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
    </nav>
  );
}

export default Header;

上面的代码展示了如何在一个导航栏中使用Link组件来生成跳转链接。注意，to属性用于指定要跳转到的路径。

avatar
文章
阅读
粉丝