【React 8/100】 React路由

React路由

React路由介绍

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

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

路由的基本使用

使用步骤

安装： npm install react-router-dom

导入路由的三个核心组件： Router / Route / Link

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

使用Router 组件包裹整个应用
使用Link组件作为导航菜单（路由入口） --- 被编译成 a 标签 ---location.pathname

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

// 导入路由组件

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

const PageTest = () => (<div>test page context</div>)

const RouterDemo = () => {

    return (

        {/* 使用Router 组件包裹整个应用 */}

        <Router>

            <div>Router Demo</div>

            {/* 指定路由入口 */}

            <Link to="/first">page one</Link>

            {/* 指定路由出口*/}

            <Route path="/first" component={PageTest}></Route>

        </Router>

    )

};

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

常用组件说明

Router组件：包裹整个应用，一个React应用只需要使用一次
- 两种常用的Router： HashRouter和BrowserRouter
- HashRouter：使用URL的哈希值实现（localhost:3000/#/first）
```
import { HashRouter as Router, Route, Link} from 'react-router-dom'
```
- 推荐 BrowserRouter：使用H5的history API实现（localhost3000/first）
Link组件：用于指定导航链接（a标签）
- 最终Link会编译成a标签，而to属性会被编译成 a标签的href属性
Route组件：指定路由展示组件相关信息
- path属性：路由规则，这里需要跟Link组件里面to属性的值一致
- component属性：展示的组件
- Route写在哪，渲染出来的组件就在哪

路由的执行过程

当我们点击Link组件的时候，修改了浏览器地址栏中的url
React路由监听地址栏url的变化
React路由内部遍历所有的Route组件，拿着Route里面path规则与pathname进行匹配
当路由规则（path）能够匹配地址栏中的pathname时，就展示该Route组件的内容

编程式导航

场景：点击登陆按钮，登陆成功后，通过代码跳转到后台首页，如何实现？
编程式导航：通过JS代码来实现页面跳转
history是React路由提供的，用于获取浏览器历史记录的相关信息
push(path)：跳转到某个页面，参数path表示要跳转的路径
```
this.props.history.push('/pagePath')
```
go(n)：前进或后退功能，参数n表示前进或后退页面数量

/*

  编程式导航

*/

class Login extends React.Component {

    btnClicked = () => {

        // 省略其它代码

        console.log('clickedbtn');

        this.props.history.push('/home')

    };

    render() {

        return (

            <div>

                <p>登录页面：</p>

                <button onClick={this.btnClicked}>back to home</button>

            </div>

        )

    }

}

const Home = props => {

    const handleBack = () => {

        props.history.go(-1)

    };

    return (

        <div>

            <h2>我是后台首页</h2>

            <button onClick={handleBack}>返回登录页面按钮</button>

        </div>

    )

};

const Demo = () => (

    <Router>

        <div>

            <h1>编程式导航：</h1>

            <div>

                {/* 路由入口 */}

                <Link to='/login'>login</Link>

            </div>

            <div>

                {/* 路由出口 */}

                <Route path='/login' component={Login}></Route>

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

            </div>

        </div>

    </Router>

);

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

默认路由

现在的路由都是通过点击导航菜单后展示的，如果进入页面的时候就主动触发路由呢
默认路由：表示进入页面时就会匹配的路由
默认路由：只需要把path设置为 '/'

 <Route path='/' component={Home}></Route>

匹配模式

模糊匹配模式

当Link组件的to属性值为 '/login' 时候，为什么默认路由也被匹配成功？
默认情况下，React路由是模糊匹配模式
模糊匹配规则：只要pathname以path开头就会匹配成功

精准匹配

默认路由认可情况下都会展示，如果避免这种问题？
给Route组件添加exact属性，让其变为精准匹配模式
精确匹配：只有当path和pathname完全匹配时才会展示改路由
```
<Route exact path='/' component={Home}></Route>
```

小结

React路由可以有效的管理多个视图实现 SPA
路由先需要通过安装
Router组件包裹整个应用，只需要使用一次
Link组件是入口，Route组件是出口
通过props.history实现编程式导航
默认是模糊匹配，添加exact编程精确匹配
React路由的一切都是组件，可以像思考组件一样思考路由

巴特西

【React 8/100】 React路由

React路由

React路由介绍

路由的基本使用

使用步骤

常用组件说明

路由的执行过程

编程式导航

默认路由

匹配模式

模糊匹配模式

精准匹配

小结

最新文章

热门文章