本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一 路由介绍

路由的由来?

单页面应用程序SPA:只有一个html页面的应用程序

现在的前端大部分使用的是spa,它的用户体验更好,对服务器的压力更小

为了使用单页面来管理原来多页面的功能,前端路由应运而生.

路由是什么?

前端路由是一套映射规则,是URL路径与组件的对应关系

路由能做什么?

让用户从一个视图(页面)导航到另一个视图(页面)

如何使用路由?

配置路径和组件 即可  

二 路由的基本使用

react-router-dom 5版本

使用步骤

1 安装

npm i react-router-dom@5.2.0

2 导入路由的核心组件

import {BrowserRouter as Router,Route, Link} from "react-router-dom"

3 使用Router组件包裹整个应用

4 使用Link组件作为导航菜单(路由入口)

    to属性:要和路由出口的path属性的值对应

5 使用Router组件 配置路由的规则 和 要展示的组件(路由出口)

path属性:要和路由入口的to属性的值对应

component属性:当路由规则符合时要匹配的组件

代码

import React from "react";
import { createRoot } from 'react-dom/client';
//导入路由的核心组件
// 给BrowserRouter起个别名Router
import {BrowserRouter as Router,Route, Link} from "react-router-dom"


const First = () => <p>页面1的内容</p>

function App() {
    return (
        <Router>
            <h2>路由基础</h2>
            {/* 路由入口 */}
            <Link to="/first">页面1</Link>
            {/* 路由出口 */}
            <Route path="/first" component={First}></Route>
        </Router>
    )
}


const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App/>)

效果

点击link,展示对应组件的内容

三 路由的组件说明

1 Router组件

包裹整个应用,一个React应用只需要使用一次

除了BrowserRouter还有一种Router是HashRouter,但是HashRouter不是很好用(地址栏有#)

2 Link组件

用于指定导航链接(Link组件最终会被编译成a标签)

Link组件的to属性的值:

 最终会被编译成a标签的href

 还表示浏览器地址栏中的pathname

3 Route组件

指定路由展示组件相关信息

path属性: 是路由规则

component属性: 表示当路由规则匹配时,要展示的组件

组件展示的规则:Route组件写在哪,渲染出来的组件就展示在哪

四 路由的执行过程

1 点击Link组件(a标签),修改浏览器地址栏中的url

2 react路由监听到地址栏url的变化

3 react路由内部会遍历所有Route组件,使用路由规则path与pathname进行匹配

4 当路由规则path能够匹配地址栏中的pathname时,就展示该Route组件的内容