老师关于'react-router-dom'的几个组件

来源:7-3 根据登录权限决定页面展示(3)

weixin_慕丝2377090

2021-05-25 10:36:52

1:老师能不能讲一下课中所提到的的

BrowserRouter, Route, Switch,Link, withRouter,Redirect


- 哪些是必须所在组件一定要在BrowserRouter才可以使用的?


- 这几个提到路由组件区别是什么,和具体如何使用吗?我在回顾之前笔记后还是不明白。


2:还有为什么 <login/>组件不直接给log out按钮包一个

<Link to='/'>

</Link>

或者用

<Redirect to='/' />


写回答

1回答

好帮手慕久久

2021-05-25

同学你好,解答如下:

1、BrowserRouter、Switch、Route这三个组件要一起使用,Switch、Route要包裹在BrowserRouter中:

http://img.mukewang.com/climg/60ac702b094d86c505800404.jpg

BrowserRouter和Route一起使用,可以定义多条路由。而Switch是用来辅助路由匹配的,即它可以控制显示哪个路由。

2、没在Route中定义的组件,如果想使用路由中的属性、方法,则需要用withRouter包裹一下。如下几个组件,是在Route中定义过的:

http://img.mukewang.com/climg/60ac77b609d3de0207980284.jpg

登录页没在Route中定义,如果该页面中,想使用路由的内容,则需要使用withRouter包裹:

http://img.mukewang.com/climg/60ac769a091ba50208050635.jpg

3、Link和Redirect都能跳转页面,区别在于Link标签包裹的内容,需要手动点击才能跳转:

http://img.mukewang.com/climg/60ac732b0958897a06580147.jpg

而Redirect无需手动点击,会自动跳转:

http://img.mukewang.com/climg/60ac744b093a8c0408790582.jpg

3、退出和登录按钮,之所以要使用事件,而不是直接包裹Link和Redirect,是因为这两个按钮除了要跳转页面外,还有其他任务要做。以退出按钮为例,它不仅要跳转到首页,还要发送ajax请求:

http://img.mukewang.com/climg/60ac750409cce7e909250438.jpg

如果用Link包裹,则只能做跳转页面的操作,没法发送ajax。为了在跳转页面时,做更多操作,所以选用事件。

祝学习愉快!

0

0 学习 · 15276 问题

查看课程