有何常用路由为 react提供

发布时间：2023-07-05 11:30:29 所属栏目：教程来源：互联网

导读： 　　给大家分享一下react常见的路由有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，

　　给大家分享一下react常见的路由有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

　　react路由有：1、页面路由，代码如“window.location.href='...'history.back()”；2、h6路由，代码如“window.onchange = function () {console.log(window.location.hash)}”；3、hash路由，代码如“history.pushState(...)”。

　　一、常见的三种路由

　　（1）页面路由

　　window.location.href='https://www.hao123.com/'

　　history.back()

　　（2）h6路由

　　window.location = '#hash'

　　window.onchange = function () {

　　    console.log(window.location.hash)

　　}

　　（3）hash路由

　　//推进一个状态

　　history.pushState('name','title','/path')

　　//替换一个状态

　　history.replaceState('name','title','/path')

　　二、React-Router路由介绍

　　1、路由方式

　　<BrowserRouter/> ：h6路由

　　<HashRouter>：hash路由

　　2、路由规则

　　<Route/>：包裹组件

　　3、理由选项

　　<Switch/>：解决匹配问题，按照顺序匹配，如果匹配到前面的后面的就不匹配了。

　　例如：/path和、path/list这样的，按照顺序path/list会匹配导/path，达不到想要的效果，加上exact关键词做到完全匹配，必须完全一样才能匹配到。

　　4、跳转导航，相当于a标签

　　<Link/>：跳转页面

　　<NavLink/>：增强版的Link

　　5、自动跳转

　　<Redirect/>：不用点击，执行到这块就自动跳转

　　三、React-Router使用

　　1、导入包

　　yarn add react-router-dom

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

　　2、BrowserRouter包裹

　　<BrowserRouter>

　　    <div>

　　        <Route path={'/'} exact component={Home}></Route>

　　        <Route path={'/detail/'} component={Detail}></Route>

　　    </div>

　　</BrowserRouter>

　　component用来修饰要跳转的路由页面，页面内容为：Home、Detail是两个真实的组件

　　path：匹配的路由规则

　　exact：修饰匹配的效果，加上表示精确匹配，不加表示模糊匹配，例如：

　　path={'/'}表示匹配：http://localhost:3000/，如果是http://localhost:3000/99就无法匹配了

　　path={'/detail/'}表示匹配：http://localhost:3000/detail/xxxxxxx，后面的不限制，前面的的匹配成功就OK了

　　3、路由的传值

　　http://localhost:3000/detail

　　（1）路由参数传值

　　路由参数

　　<Route path={'/detail/:id'} component={Detail}></Route>

　　跳转参数：

　　<Link key={index} to={'/detail/' + item.id}>

　　接收参数：

　　this.props.match.params.id

　　打印结果

　　3。直接使用

　　访问结果

　　http://localhost:3000/detail/3

　　（2）路由参数传值

　　    路由参数

　　<Route path={'/detail'} component={Detail}></Route>

　　跳转参数：

　　<Link key={index} to={'/detail？=' + item.id}>

　　接收参数：

　　this.props.location.search

　　打印结果

　　?id=3。需要自己解析

　　访问结果

　　http://localhost:3000/detail?id=3

　　4、跳转原理

　　Link的to参数匹配导Route中的path参数，则执行跳转，跳转到Route中的component中设置的组件。

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!