React路由渲染

Router路由渲染
一、前端路由
简单的说，就是在保证只有一个 HTML 页面且与用户交互时不刷新和跳转页面的同时，为单页面应用中的每个视图展示形式匹配一个 URL规则地址。在刷新、前进、后退时均通过这个URL地址来实现页面的展示。
为实现这一目标，我们需要做到以下二点：

改变 url 且不让浏览器向服务器发送请求
监听到 url 的变化二、react路由

二、react路由
2.1、介绍
网址：
React Router: Declarative Routing for Reactreactrouter.com/web/guides/quick-start
react-router-dom是一个专门给react提供的一个实现页面路由插件库，使用此插件库可以实现，点击页面中的链接不会刷新页面, 页面也不会向服务器发请求，当点击路由链接时, 只会做页面的局部更新
在这里插入图片描述

示例效果：http://wx.cocalch.top/
安装react路由
此插件库默认是没有在react基础项目中安装的，所以使用时需手动使用npm或yarn安装
npm i -S react-router-dom
2.2、相关组件
在react项目中使用react-router-dom路由插件需要学习它所提供的相关组件，这些组件帮助我们完成了路由规则设置与渲染以及导航链接声明跳转。
相关组件
BrowserRouter/HashRouter 定义路由的方式(hash方式或html5提供路由url方式)
BrowserRouter：使用HTML5历史API完成路由设置，此方式需要服务器支持，否则刷新将出现页面丢失问题
HashRouter：使用URL的hash值(锚点)完成路由设置，此方式无需服务器支持，兼容性好但url相对不太美观
Route 路由规则匹配成功后组件渲染容器
path 定义访问路由规则地址
exact 精确匹配component/render/children
component （组件对象或函数）
render (函数)
children (函数或组件)
Link/NavLink 跳转导航
to 访问的路由地址
NavLink组件所有
activeClassName 设置路由规则和当前url地址一致时的css样式名称
各组件关系示意图
在这里插入图片描述

2.3、使用路由
使用示例

<HashRouter>
    <Link to="路由地址">地址</Link>
    <Route path="路由规则" component={组件} />
</HashRouter>

在src/App.js中导入路由组件

import React, { Component } from 'react'
import { HashRouter as Router, Route, Link } from 'react-router-dom'
import Home from './pages/Home'
import News from './pages/News'

class App extends Component {
  render() {
    return (
      <Router>
        <h3>导航区域</h3>
        <hr />
        <ul>
          <li>
            <Link to="/home">首页</Link>
          </li>
          <li>
            <Link to="/news">新闻</Link>
          </li>
        </ul>
        <hr />
        <Route exact path="/home" component={Home} />
        <Route path="/news" component={News} />
      </Router>
    );
  }
}
export default App;

2.4、路由渲染
Route组件是用于路由规则匹配成功后组件渲染容器，此组件提供了3种方式组件渲染方式
component = (组件对象或函数)

<Route exact path="/home" component={Home} />   # 推荐
或
<Route exact path="/home" component={()=><Home />} />

render = (函数)

<Route exact path="/home" render={props=><Home />} />

// 不重新创建示例

import React, { Component } from 'react';

import { Route } from 'react-router-dom'
import Home from './pages/Home';


class App extends Component {
  state = {
    count: 1
  }
  render() {
    return (
      <div>
        <h3>{this.state.count}</h3>
        <button onClick={() => this.setState(state => ++state.count)}>自增一下</button>
        <hr />
        <Route path="/home" component={() => <Home count={this.state.count} />} />
      </div>
    );
  }
}

export default App

children = (函数或组件)

<Route path="/about" children={props=>{
	return <div>children渲染</div>
}} />
或
<Route path="/about" children={<About />} />

3种渲染区别
1.component可以使用组件对象渲染或内联式方式渲染，render只能使用函数，children使用函数或直接使用组件
2.component内联式渲染方式在每次匹配路由成功后都将创建一个新组件，而后两者不会，所以用内联式方式建议使用后两者，内联方式渲染组件，推荐用render
3.当children的值是一个函数时，无论当前地址和path路径匹不匹配，都将会执行children对应的函数当children的值为一个组件时，当前地址和path不匹配时，路由组件不渲染 children的值函数时，会在形参中接受到一个对象，对象中match属性如果当前地址匹配成功返回对象，否则null,由此可以使用它来完成动态更换UI，如实现高亮导航
*陆荣涛前端学习交流Q群858752519
加群备注：CSDN推荐

猜你喜欢