【React】路由（详解）

目录

单页应用程序 SPA:

路由:

前端路由：

后端路由：

路由的基本使用

使用步骤

常用组件说明

BrowserRouter和HashRouter的区别

路由的执行过程

默认路由 

精确匹配

Switch的使用

重定向路由

嵌套路由

向路由组件传递参数

1.params参数

2.search参数

3.state参数

编程式路由导航

withRouter

单页应用程序 SPA:

1. 整个应用只有一个完整的页面
2. 点击页面中的链接不会刷新页面，只会做页面的局部更新
3. 数据都需要通过ajax请求获取, 并在前端异步展现。

路由:

前端路由：

• 浏览器端路由，value是component，用于展示页面内容
• 注册路由: <Route path="/test" component={Test}>
• 工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

后端路由：

• 理解： value是function, 用来处理客户端提交的请求。
• 注册路由： router.get(path, function(req, res))
• 工作过程：当node接收到一个请求时, 根据请求路径和方法找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据

一个路由就是一个映射关系(key:value)

key为路径, value可能是function或component

路由的基本使用

使用步骤

• 安装：react-router-dom
• 导入路由的三个核心组件：Router/Route/Link
  import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
• 使用Router 组件包裹整个应用（重要）

<Router>
   <div className="App">
    //...
   </div>
</Router>

• 使用Link 组件作为导航菜单（路由入口）

<Link to="/first">页面一</Link> 

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

const First = () => <p>页面一的页面内容</p>
<Router>
   <div className="App">
      <Link to="/first">页面一</Link>
      <Route path="/first" component={First}></Route>
   </div>
</Router>

常用组件说明

• Router组件：包裹整个应用，一个React应用只需要使用一次
• 两种常用Router：HashRouter和BrowserRouter
• HsahRouter：使用URL的哈希值实现(localhost：3000/#/first)
• (推荐)BrowserRouter：使用H5的history API实现(localhost：3000/f