REACT路由

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

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

 

路由使用

https://reactrouter.com/

3.2.1、安装路由模块

路由模块不是react自带模块，需要安装第3方模块

npm i -S react-router-dom

相关组件

• Router组件：包裹整个应用，一个React应用只需要使用一次

   Router： HashRouter和BrowserRouter

       HashRouter： 使用URL的哈希值实现 （localhost:3000/#/first）

       BrowserRouter：使用H5的history API实现（localhost3000/first）

• Link/NavLink组件：用于指定导航链接（a标签）

最终Link会编译成a标签，而to属性会被编译成 a标签的href属性

• Route组件：指定路由展示组件相关信息(组件渲染)

path属性：路由规则，这里需要跟Link组件里面to属性的值一致

   component属性：展示的组件

各组件关系示意图

使用路由

在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 path="/home" component={Home} />

        <Route path="/news" component={News} />

      </Router>

    );

  }

}

export default App

在src/index.js文件中定义一个路由模式

在App.jsx文件中定义路由导航

声明式导航

使用Link或NavLink组件完成声明式导航的定义

import React, { Component } from 'react'

// react中的路由规则都是以组件的方式定义
import { Route, Link, NavLink } from 'react-router-dom'

// 导入渲染的视图组件
import Home from './views/Home'
import News from './views/News'
import Profile from './views/Profile'

// 样式
import './assets/css/app.css'
import Detail from './views/Detail'

class App extends Component {

  constructor(props) {
    super(props);
  }


  render() {
    return (
      <>
        {/* <ul>
          {
            //  字符串形式申明路由
          }
          <li><Link to="/">首页</Link></li>
          <li><Link to="/news">新闻列表</Link></li>
          {
            // 对象形式
          }
          <li><Link to={{
            pathname: '/profile'
          }}>个人中心</Link></li>
        </ul>
        <br /><br />
        <br /> */}
        <ul>
          <li><NavLink exact activeClassName="active" to="/">首页</NavLink></li>
          <li><NavLink activeClassName="active" to="/news">新闻列表</NavLink></li>
          <li><NavLink activeClassName="active" to="/profile">个人中心</NavLink></li>
        </ul>
        <hr />

        {/* path访问的uri路径  component就是匹配成功后渲染的组件 */}
        {/* exact 严格匹配 */}
        {/* Rouet组件中匹配成功的渲中会自动在this.props添加路由导航相关属性方法 */}
        <Route exact path="/" component={Home} />
        <Route path="/news" component={News} />
        <Route path="/profile" component={Profile} />
        {/* 动态路由 */}
        <Route path="/detail/:id" component={Detail} />
      </>
    )
  }

}
export default App

路由参数

在Route定义渲染组件时给定动态绑定的参数

• params

在路由目标页面中通过this.props.match.params得到

• query

通过地址栏中的 ?key=value&key=value,通过this.props.location.search

• state

隐式转参，一点用于数据的收集 this.props.location.state

获取路由中的参数数据