当前位置：首页 > news >正文

React路由(React学习笔记_09)

news 来源：原创 2025/5/19 5:21:54

React路由

1,路由基础

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

1, 安装: yarn add react-router-dom
2, 导入路由的三个核心组件：Router/Route/Link
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'3, 使用Router组件包裹整个应用
<Router><div>// ...</div>
</Router>

使用步骤：

4, 使用Link组件作为导航菜单(路由入口)

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

5, 使用Route组件配置路由规则和要展示的组件(路由出口)

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

2，路由组件说明

Router组件：包裹整个应用，一个React应用只需要使用一次
- 两种常见Router：HashRouter、BrowserRouter
- HashRouter: 使用URL的哈希值实现(localhost:3000/#/first)
- 推荐使用BrowserRouter：使用H5的history api实现(localhost:3000/first)
Link组件：用于指定导航链接(a标签)
- to属性：浏览器地址栏中的pathname(location.pathname)
Route组件：指定路由展示组件相关信息
- path属性：路由规则
- component属性：展示的组件
- Route组件写在哪，渲染出来的组件就展示在哪

3，路由的执行过程

1,点击Link组件，修改了浏览器地址栏中的url
2，React路由监听到地址栏url的变化
3，React路由内部遍历所有Route组件，使用路由规则(path)与pathname进行匹配
4，当路由规则(path)能匹配地址栏中的pathname时，就展示该Route组件的内容

image

4，编程式导航

编程式导航：通过JS代码实现页面跳转
history是react路由提供的，用于获取浏览器历史记录的相关信息
push(path)：跳转到某个页面，参数path表示要跳转的路径
go(n)：前进或后退到某个页面，参数n表示前进或者后退页面的数量

class Child extends Component{handleLogin = () => {this.props.history.push('/home')}
}

5, 默认路由

默认路由：进入页面的时候就会匹配的路由
- 默认路由path为: /
```
<Route path="/" component={Home} />
```

示例：

const Home = () => <p>进入页面的时候就展示的Home组件的内容</p>
const App = () => (<Router><div><p>编程式导航</p><Route path="/" component={Home} /></div></Router>
)

6，匹配模式

模糊匹配
- 默认情况下，react的路由是模糊匹配的
- 模糊匹配规则，只要pathname以path开头就会匹配成功
  - path代表route组件的path属性
  - pathname代表 Link组件的to属性(即location.pathname)
    比如：path为/，能够匹配所有的pathname。path为：/first，能够匹配所有的/first或/first/a或/first/a/b/...
精确匹配
- 给Route组件添加exact属性即可

下篇开始项目实战