React路由-CSDN博客

本文链接：https://blog.csdn.net/vain__hope/article/details/122333798

文章目录

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

react路由

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

react路由基本使用

List item

安装

这里我们安装的是5.0版本

npm i react-router-dom@5.0 -S

导入路由的三个核心组件

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

使用Router组件包裹整个应用
使用Link组件作为导航菜单（路由入口）
使用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常用组件

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

● to="/login"

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

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

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