首页 > 网络编程 > JavaScript > javascript类库 > React > react路由(Router、Link和Route)

react路由基础解读(Router、Link和Route)

2023-07-04 10:37:01 作者：mapbar_front

这篇文章主要介绍了react路由基础解读(Router、Link和Route)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

react路由(Router、Link和Route)

Facebook对react进行持续的改进，路由作为其中最重要的一部分，在4.0版本对其进行了大量的优化，总的来说，简单易用！之前使用react路由的时候，我们引入的是react-router包。现在改版之后，我们引入的包是react-router-dom包。

改版之后的react-router-dom路由，我们要理解三个概念，Router、Route和Link。

1、RouterRouter

我们可以把它看做是react路由的一个路由外层盒子，它里面的内容就是我们单页面应用的路由以及路由组件。

使用方式：

import { BrowserRouter as Router } from "react-router-dom";
class Main extends Component{
    render(){
        return(
        <Router>
            <div>
                //otherCoding
            </div>
        </Router>
        )
    }
}

2、LinkLink

是react路由中的点击切换到哪一个组件的链接，（这里之所以不说是页面，而是说组件，因为切换到另一个界面只是展示效果，react的本质还是一个单页面应用-single page application）。

基本使用方式：

import { BrowserRouter as Router, Link} from "react-router-dom";
class Main extends Component{
    render(){
        return(
        <Router>
            <div>
                <ul>
                    <li><link to='/'>首页</Link></li>
                    <li><link to='/other'>其他页</Link></li>
                </ul>
            </div>
        </Router>
        )
    }
}

特别说明：

第一、Router下面只能包含一个盒子标签，类似这里的div。

第二、Link代表一个链接，在html界面中会解析成a标签。作为一个链接，必须有一个to属性，代表链接地址。这个链接地址是一个相对路径。

第三、Route，是下面要说的组件，有一个path属性和一个组件属性（可以是component、render等等）。

3、RouteRoute

代表了你的路由界面，path代表路径，component代表路径所对应的界面。

使用方式：

import React,{ Component } from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
class Home extends Component{
    render(){
        return (
            <div>this a Home page</div>
        )
    }
}
class Other extends Component{
    render(){
        return (
            <div>this a Other page</div>
        )
    }
}
class Main extends Component{
    render(){
        return (
            <Router>
                <div>
                    <ul>
                        <li><Link to="/home">首页</Link></li>
                        <li><Link to="/other">其他页</Link></li>
                    </ul>
                    <Route path="/home" component={Home}/>
                    <Route path="/other" component={Other}/>
                </div>
            </Router>
        )
    }
}
render(<Main />,document.getElementById("root"));

react路由基础、使用与执行

接下来我们将会介绍React路由的基本使用方法，以及什么是默认路由，路由是怎么实现跳转的，他们是如何进行匹配的。

1、React路由基础

现代前端应用大都是SPA，那么什么是SPA呢？

SPA就是单页应用程序，他的优点是用户体验好、服务器压力小，但是我们要把很多内容放在一个页面上，为了有效使用单个页面管理原来多页面的功能，前端路由应运而生。

前端路由实现功能：从一个页面到另一个页面

映射规则：URL路径和组件对应功能（配置路径和组件配对）

2、路由的基本使用

1）安装react-router-dom

2）导入路由核心组件（当然我们要按需导入）

BrowserRouter as Router(Router就是BrowserRouter的别名)
Route
Link

3）使用React组件包裹整个应用(重要)

4）使用Link组件作为导航菜单(路由入口)，会被编译成a标签

<Link to="/first">页面1</Link>

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

<Route path="/first(和路由入口匹配)" component={要展示的组件的名}></Route>

但是我们的内容展示在哪呢？Route写在哪就把内容渲染在哪

3、路由执行过程

1）点击Link组件，修改浏览器地址栏URL

2）React路由监听到地址栏变化

3）React路由遍历所有Route组件，使用路由规则path与pathname匹配

4）当匹配成功就展示Route组件内容

编程式导航：通过JS代码实现页面的跳转

4、默认路由

进入页面就会展示的路由，进入页面就会被匹配到展示。

<Route path='/'>

5、路由匹配模式

1）模糊匹配模式

a）”/“所有pathname都可以被匹配

b）只要pathname是以path开头的都会匹配成功

c）pathname指得是Link组件中to属性的值

d）path指的是Route组件中path属性的值

2）精确匹配

a）给Route组件添加exact属性，让其变成精确匹配

b）只有pathname和name完全相同才会被展示

心得：React路由的一切都是组件、我们可以像思考组件一样去思考路由

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。