React路由基础

介绍

现代的前端应用大多都是SPA（单页应用程序），也就是只有一个html页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面管理原来多页面的功能，前端路由应运而生。

前端路由功能：让用户从一个试图（页面）导航到另一个视图（页面）
前端路由是一套映射规则：在React中，是URL路径与组件的对应关系
使用React路由简单来说，就说配置路径和组件（配对）

基本使用

安装： yarn add react-router-dom

/**
 * 路由的基本使用
 */

// 1、导入路由的三个核心组件
import { BrowserRouter as Router, Route, Link} from 'react-router-dom'

const First = () => <p>first页面</p>

// 2、使用Router组件包裹整个应用（重要）
export class BaseRouter extends React.Component {
    render() {
        return (
            <Router>
                <div>
                    <h1>路由的基本使用</h1>
                    <div>
                        {/* 3、指定路由的入口 */}
                        <Link to="/first">入口一</Link>
                        {/* 4、指定路由的出口 */}
                        <Route path="/first" component={ First } />
                    </div>
                </div>
            </Router>

        )
    }
}

两种常用的路由

BrowserRouter 和  HashRouter（地址后面有带#号的）

路由匹配模式

1、模糊匹配（默认匹配）

        Link 中的to属性跟Route中的path开头匹配就能导航

2、精确匹配

//  添加 exact 后精确匹配
<Route exact path="/first" component={First} />