2022 加更内容/视频/129_尚硅谷_ReactRouter6教程_重定向

那在这一小节呢，我们给大家讲一下重定向的写法，在真正讲之前呢，把这个src给它备份一下，我要把我代码的痕迹给大家留下啊，第一个讲的，所以说编号是零一_src走，那名字呢，就叫做一级路由，那大家回想一下，我们上一小节做的不就是一个一级路由切换的效果吗？好，回到案例里边解决这么一个问题啊，就是当我什么都不输入的时候，它是有一个警告的，上一小节大家也看见了，这个警告翻译过来的意思呢，就是这个路径没有对应任何的组件。那大家想想，如果你的路径是斜杠about，那最终你所对应的路由组件不就是about吗？这不就是一组路由规则吗？然后他发现说，诶，这个路径没有规则，那咋的就报了个警告呗，大家也知道，如果这我什么都不输入，那就相当于你是有一个斜杠的。好想想react router5我们当年怎么解决，我们得回到APP里边，然后当年呢，我们是在这引入了一个内置的东西，叫做re REC readre，对吧，用于重定向的，然后需要你在这个规则的最后是不是写一个readre组件呀，现在有所变化了，注意各位不写ready RA这儿呢，引入的也不是他了，因为RO6把它删了，换了一个新的人，叫做navigate。

那下边的规则也得变一变了，你正常写你的root。在这别写斜杠，Home，写斜杠还写element，接下来重点来了，你不要以为说老师我在这写个about不就得了吗？那你这样的话，你用那个navigate了吗？没有用，所以说是这样的啊，正常写element代表这个路径，我要渲染接下来的这些元素，那到底是哪个呢？删掉是nagate navigate有要求，里边必须要写一个to属性，就是你要去哪，那我要去哪呢？About，诶。

Navigate这个内置的组件挺有意思的，只要navigate被渲染，势必会引起视图的切换。来，我们先看一下效果啊，回到这儿什么也不输入，走默认about，那点home就home呗，你点这个再再回来呗。哎，大家体会体会，挺特殊的哈，一渲染视图就切换。为了能让大家理解的更好啊，咱们再多做一个小练习，就是接下来呢，我在这个home组件里边，在这儿加一句话，哎，叫做当前的萨姆值为多少？下边再来一个按钮，写上点我把萨姆变为二，好先实现这么一个效果去啊，那就回到home组件里边。然后呢，首先你得引入use state，这会儿大家应该还记得吧，你没有use state，你在函数式组件里边，你怎么玩状态呀，就是在这我就直接写了啊，Constant走use state里边是不是传入初始值啊，我就写一个一吧，那在这能收到这个值本身，以及更新这个值的方法对吧？好，那在这呢，也得改一下，写个div，正常写这些，下边来一个H4，叫做当前萨姆的值是走读出来呗，下边呢，还得有一个按钮button，叫做点，我将sum变为二，那你得给他一个on click，走调谁呢？Set some。

直接这么写行吗？不行啊，告诉人家变成多少啊，老师，那我写了二可以吗？不可以，这是一个基本功的问题，在这儿呢，不就不再说了，你是不是得外边包一个函数啊，这不就OK了吗？来看一下效果啊，回到后面这如果一点是不就变为二了？提出一个新的需求。

如果萨姆的值变为二了，直接跳到about。那如果不是二呢？那就该怎么呈现就怎么呈现，我还是在后面这，我还是呈现这些内容，一旦你变为二了，瞬间我就得过来。那这个时候你就也得用那个navigate组件，好回来我们简单写一下啊，Import走，引入reactor DOM那个东西叫做navigate，这名字你得记住啊，然后在这其实就是第九行动点手脚，别直接写这H4，写个三元表达式，问一下萨姆的值是二吗？如果是二，您注意了，你就得写navigate，诶，然后to说一下你要去哪儿斜杠好不好，然后呢，如果不是二的冒号，正常把之前的H4写在这儿呗，来感受一下啊各位回到我的home里边。

由于是一原封不动，那如果你把它改成2321走，是不是就切过来了呀？所以说你再次体会体会这句话，就是navigate这个组件只要渲染就会引起视图的切换，那有的同学就可能比较鸡贼，诶说老师你看着啊，我不给他写to，我看你往哪去呢？那你猜他会怎样呢？来看一下效果啊，走321走着他报错了，而且你看一下他说的是什么呀，说哥们儿，我发现不对呀，你没有路径的名字呀，就是因为你没有写那个to呀，是吧？啊，那这儿呢，其实还有一个属性，再跟大家说一下啊，就是navigate里边不仅仅可以写这个to，还可以写这么一个属性，我一写大家应该能猜得到PL啥意思，就是跳转的模式，默认呢，它的模式是push，或者说默认replace的值是false，那你说同学PL。

False，那意思就是push为真呗，大家都知道路由跳转有两种模式，一个是re replace，一个是谁push，哎，默认呢，就是这样，也就是说你不写它默认就是push模式，那如果我写上这块是true呢，哎，这样我们啊先不写这个，然后呢，浏览器给它关掉，重新开一下，我们看看啊是不是push模式，我们验证一下啊3000走。Push试模式会留下痕迹，点后退呢，会退回去是吧？走走，那这个时候我点后退肯定会回到后呗，那如果加上了这个来走着，那你得关掉浏览器啊，重开一下，为啥重开一下，要不你说不明白它留下很多历史记录了吗？好3000走这个时候走着。注意了，切换了吗？好，你点后退的时候走你回不去了，因为已经被替换掉了是吧？这就是哪个组件呢？Navigate用于干嘛的呀？重定向，只要这哥们渲染就会引起视图的切换。好，回到笔记里边，我们整体过一遍，同学，截止到目前我们用了哪些内置的组件啊？

Browse ror是不是用过了啊，说老师这个人没用过哈西ror，这么说吧，同学，如果react roor到五你学了，那么BRO，哈希RO和五是一样的，对吧？关于他俩之间的区别呀与联系呀，我们之前都有详细的讲解过，在这就不再赘述了，然后还用了哪个，朱老师用了这俩，嗯，一会再说这俩啊，刚才用的是哪个，是不是navigate来读一读，它的作用是只要这个组件被渲染，哎，就修改路径，切换视图啊，那默认呢，是push，你可以通过replace处去指定一下replace模式，对吧？哎，那这会也是刚才我写的那个例子，然后这里边呢，还有一个东西我没有去提，就是roots与root啊，点一下同学，这里边东西挺多的啊，我们先关注前五条，这个第六条啊，我们得单独用一小节呢去给大家讲解，就是react RO盗六啊，很高级了，它支持路由表了，回头我们再仔细说啊，现在不。

提这个六，先把12345都过一遍，V6版本中移除了先前的Switch，引入了新的替代者，就是肉肉必须配合root一起使用，而且必须用roots包裹着root root其实就相当于一个一副语句，如果路径匹配，那就呈现对应的组件。好来再看这个同学，第四个我们没有验证过啊，你读一读，他说这里边还可以加这么一个东西啊，说用于干嘛呢？匹配时是否区分大小写，用的不多啊，我们来验证一下，就这个啊，什么kcent这个东西来我不加啊，你注意同学回到这边。改一下代码，我把这个about呀给他故意呀，给它编成大写的，我这个规则我写的是大写的，但是我跳转的时候我写的是啥小写的这块，注意啊，这块是管跳转的，这块是规则，现在明显跳的时候是小写的，规则是大写的，那能不能行呢？来看一下效果啊，走走是不是可以的，但是如果你加上这个啊kcentive把它拿过来放在我们的这个里边，好，你注意了它就区分大小写了，你点击home的时候没问题，但是about咋的，路径小的规则大的没对上，对吧？这个用的不多，大家了解一下就可以了，好，那目前我们学过的这么多，还有这个五没读是吧？那读一下吧，当URL发生变化的时候，肉S会查看其所有的root元素，然后一层一层的进行匹配，当然现在啊，我们还没有写啥，没有写二级路由呢，这一小节就讲了两个东西，第一个。

啊，Navigate这个内置组件的使用，还有就是root标签里边可以加一个K3 OK，那这一小节我们停。