文章目录

• react路由
• react路由基本使用
• react常用组件

react路由

现代的前端应用大多都是SPA(单页应用程序)，也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。
前端路由的功能：让用户从一个视图(页面)导航到另一个视图(页面)，前端路由是一套映射规则，在React中是URL路径与组件的对应关系，使用React路由简单来说，就是配置路径和组件(配对)。

react路由基本使用

1. List item

安装

这里我们安装的是5.0版本

npm i react-router-dom@5.0 -S

2. 导入路由的三个核心组件

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

3. 使用Router组件包裹整个应用
4. 使用Link组件作为导航菜单（路由入口）
5. 使用Route组件配置路由规则和要展示的组件（路由出口）

import React from 'react'
import ReactDom from 'react-dom'

// 导入路由组件
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const App = () => (
  // 使用Router组件包裹整个应用
  <Router>
    <div>
      <h1>react</h1>

      {/* 指定路由入口 */}
      <Link to="/first">页面1</Link>
      <Link to="/second">页面2</Link>

      {/* 指定路由出口，path设置为Link中的to属性，component设置为要渲染的组件 */}
      <Route path="/first" component={First}></Route>
      <Route path="/second" component={Second}></Route>
    </div>
  </Router>
)

class First extends React.Component {
  render() {
    return (
      <div>
        <h2>我是页面1的标题</h2>
      </div>
    )
  }
}

const Second = () => (
  <div>
    <h2>我是页面2</h2>
  </div>
)


ReactDom.render(<App />, document.getElementById('root'));

react常用组件

1. BrowserRouter(浏览器路由)和HashRouter(哈希路由)
2. NavLink 导航链接
   ● exact 精确匹配
   ● to 链接地址
   ● class=“active” 匹配状态
3. Router 路由容器
   ● exact 精确匹配 （路径和配置的path完全匹配）
   ● path 路由地址
   ● component 组件
4. 重定向
   ● to 去哪儿
   ● from 从哪
5. 匹配一个路由
6. 路由离开调用弹框
   ● when 当条件为真
   ● message 弹出文本内容
7. 跳转

● to="/login"

to={{
pathname:"/login",
search:"name=mumu&age=18",
hash:"#good",
state:{redirect:"xxx"}
}}

8. 404界面
   a. Switch 包裹（一次匹配一个）
   b. path="*"
   c. 配置放在最后面
9. 路由参数
   ● path="produce/:id"
   ● 切换切换 to="/produce/abc"
   ● 获取获取：props.match.params.id
10. 子路由

//在主路由添加
  <div>
          <Route path="/admin/dash" component={Dash}></Route>
          <Route path="/admin/orderlist" component={OrderList}></Route>
          {/* 重定向 */}
          <Redirect path="/admin" to="/admin/dash"></Redirect>
       </div>