React Router 的详细讲解以及基本使用教程

背景

最近在学习React，但是众所周知，React是一个单页面应用(SPA)。 “单页面应用”顾名思义:只有一个页面，它是没有路由导航机制的。因此，为了在不刷新整个网页的情况下在不同的视图之间进行切换，我们需要一种路由机制，以便在不同的视图之间切换而不用刷新整个网页.而 React-Router就是目前最好的React路由解决方案

那我们既然要学习和使用React-Router，当然要先理解React-Router是什么？有什么优点？

先理解React-Router是什么？

React Router 是一个基于 React之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。

React-Router有什么优点？

1. 完美适配React：React Router是专为React应用程序设计的，与React完美集成。它与React的生命周期和状态管理等特性无缝衔接。
2. 完美的实现单页应用程序的路由跳转：React Router能够帮我们构建单页应用程序，其中所有的页面内容在初始加载时一次性加载，并通过客户端路由来控制显示不同的组件，而无需重新加载整个页面。让我们的用户拥有更流畅的体验，因为只有相应的组件会被更新，而不会刷新整个页面
3. 路由配置灵活：React Router提供了灵活的路由配置选项，能够根据应用程序的需求定义和管理路由规则。使用Route组件定义不同的路径和相应的组件，还可以通过参数传递、嵌套路由和重定向等功能来处理更复杂的路由场景。
4. 支持嵌套路由：React Router允许您在应用程序中创建层次结构的路由。它可以帮助我们构建复杂的页面布局和组件组。我们可以在一个父级路由中定义子级路由，并在相应的组件中嵌套使用。

使用教程

学习使用React Router之前先了解React Router提供的实现导航和路由功能的三个主要组件。

BrowserRouter

BrowserRouter：它的主要作用是为React应用程序提供客户端路由功能。它使用 HTML5 的 history API 来处理URL的变化，并根据URL的路径匹配渲染相应的组件。它通常是应用的根组件，用于包裹整个应用。

代码示例：

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

Route

Route：用于定义路由的规则。作用是声明指定URL路径和要渲染的组件之间的关联，它接受两个主要的属性：path 和 component。path 属性指定了 URL 的路径，component 属性指定了匹配该路径时要渲染的组件。

代码示例：

<Route path="/home" component={Home} />

Link

Link：这个组件用于创建导航链接。它会生成一个 <a> 标签，并处理点击事件以避免浏览器重新加载页面。你可以使用 to 属性来指定链接的目标路径。

代码示例：

<Link to="/home">Home</Link>

完整示例

import React from 'react';
// 从react-router-dom中导入我们需要使用的路由导航组件
import { BrowserRouter, Route, Link, Routes } from 'react-router-dom';

// 声明我们的组件Home和About
const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;

const App = () => {
    return ( 
    //使用我们的<BrowserRouter>组件包裹整个应用
        <BrowserRouter> 
            <div>
                <nav>
                    <ul>
                        <li>
                        
                       //用Link标签代替<a>标签的写法声明跳转的URL地址，在进行代码打包时会被转换成`<a>`标签 
                       
                            <Link to="/">Home</Link>
                        </li> 
                        <li> 
                            <Link to="/about">About</Link> 
                        </li> 
                    </ul>
                </nav>

      <Routes>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Routes>
      </div>
    </BrowserRouter>

    );
};

export default App;