this.props 的神奇用法（路由传参）

        移动端培训项目，之前大多用GET请求。最近接到一个功能需求，后台给我做了五个POST接口，一瞬间有点凌乱。

        由于所有接口都是POST的请求，每个接口的请求参数大约都有四五个，而且是来自不同接口的返回值以及自定义值。而react的数据向来是存在reducer中的，所以造成了页面一刷新，这些由上一个接口返回过来的，对应请求参数数据就获取不到了。结果当然是“查询不到”啦~

        本文侧重汇总 ： ①thisprops的用法；②react常用的路由传参方法。

        传递数据： thispropshistorypush({pathname:'/xxxx',state:{data:data}})

        取数据：     let ltEnrollInfo = thispropslocationstateltEnrollInfo;

（有时间再细理thisprops）

    汇总一下常用的三种路由传参方式：

1、params传参(刷新页面后参数不消失，参数会在地址栏显示)

1、params传参(多个动态参数)

2、query传参(刷新页面后参数消失)

3、state传参( 刷新页面后参数不消失，state传的参数是加密的，比query传参好用)

react的路由钩子函数主要有四种:

⭐️useHistory

⭐️useLocation

⭐️useParams

⭐️useRouteMatch

但是使用这些钩子函数React版本必须>= 168

这个钩子可以访问history，可以更好的进行导航

首先声明此钩子函数

使用

点击Go home按钮，即可跳转到首页。

此钩子可以返回location表示当前URL对象

定义

使用

当点击左侧的导航时，可以直接获取location表示的URL对象

useParams返回URL参数的键值对的对象

定义此钩子

使用

每次访问不同的路由，可以取出其中的params

此钩子可以精准匹配路由然后显示对应的页面

定义

使用

效果

只有当路由精准匹配时，才会显示对应的组件

这篇文章主要介绍了React-Router6版本更新引起的路由变化怎么用的相关知识，内容详细易懂， *** 作简单快捷，具有一定借鉴价值，相信大家阅读完这篇React-Router6版本更新引起的路由变化怎么用文章都会有所收获，下面我们一起来看看吧。

React Router应该是React生态系统中最受欢迎的库了，npm周下载量达600w+，github也有452k的加星，足以说明它是一款非常优秀的库，作为React社区重要的库，它经历了多次迭代和重大更改，就在上个月，更是迎来了一个大的正式版更新6x，当前最新为602，相对比于之前的5x版本做出了较大改变，不管从用法还是从性能上都有了明显的提升，本文也将用新老版本对比的方式让你能以最快的速度上手新用法

话不多说，先列出60做出的改变之处：

用法变化

替换为

嵌套路由新写法

推出全新hook，全面拥抱函数组件

基于对象的路由，实现js配置所有路由

整体代码比上个版本减小大约70%

用法变化

组件变化较大，移除了component与render属性，使用element属性替代，因为与之前的版本代码写法不能兼容，写法区别如下

// 5x用法

<Route path="/home" component={Home} />

<Route path="/login" render={()=><Login/>}/>

// 6x用法

<Route path="/home" element={<Home/>} />

<Route path="/login" component={<Login/>} />

替换为

v6版本移除了 组件，并使用替换，除了能替代 组件的功能外，也做了一些改变，比如所有的都必须包裹在中,否则抛出错误

// 5x用法

<Switch>

<Route path="/home" component={Home} />

<Route path="/login" component={Login} />

</Switch>

// 6x用法

<Routes>

<Route path="/home" element={<Home/>} />

<Route path="/login" component={<Login/>} />

</Routes>

嵌套路由

v6版本的react-router支持多种嵌套路由写法，写法分别如下：

第一种写法：延续v5版本写法，保持原有组件结构 这种写法比较适合重构的项目，不需要改变太多的代码便能过渡到v6版本

// Appjsx

<Routes>

<Route path="/home" element={<Home/>} />

<Route path="/user/" element={<User/>} />

</Routes>

// Userjsx

<Routes>

<Route path="profile" element={<UserProfile/>} />

<Route path=":/id" element={<UserDetail/>} />

</Routes>

虽然组件结构与v5版本一至，但写法上有一定的差异，父组件Appjsx中的path属性最后必须使用星号(path="/user/")，子组件Userjsx中的路径都是相对于其父级路径，所以不需要像v5版本那样写全整个路径，妈妈再也不用担心我会写错地址。

另外，如果中的path属性不以/开头，则是相对于其父级路径，这样的好处是使嵌套路由实现变得更加简单，并易于组合复杂的路由和布局

第二种写法：把所有的写在一起，配合实现路由组件的显示

// Appjsx

<Routes>

<Route path="/home" element={<Home/>} />

<Route path="/user" element={<User/>}>

<Route path="profile" element={<UserProfile/>} />

<Route path=":/id" element={<UserDetail/>} />

</Route>

</Routes>

// Userjsx

<Outlet/>

这样写法让我们能更清晰地去了解路由结构，能更好地管理我们的路由，而能让我们能更精确地把嵌套的路由组件布局到需要位置显示

第三种写法：使用useRoutes()实现路由配置

使用useRoutes配置路由与配置路由效果一致，只是这种写法使用javascript生成路由，不依赖JSX，返回相应结构的路由组件树，有木有感觉回到了VueRouter？有木有？

function App(){

// 以下写法与第二种写法效果一至

const element = useRoutes([

{path:'/home',element:<Home/>},

{

path:'/user',

element:<User/>,

children:[

{path:'profile',element:<UserProfile/>},

{path:':/id',element:<UserDetail/>},

]

}

])

return element

}

以上三种写法各有各的优点，开发者可以根据自身的需求选择一种来实现你的嵌套路由

重定向

新版本的react-router移除了组件，但可以使用新增的组件配合组件实现重定向效果

<Routes>

<Route path="/home" element={<Home/>} />

<Route path="/" element={<Navigate to="/home"/>}>

</Routes>

路由跳转

路由配置好后免不了要进行页面跳转，但新版的react-router移除了history对象，故不能使用v5版本的history（包括useHistory hook）已不能使用，我们可以使用以下两中方式进行跳转

使用或进行跳转这种方式与上一个版本几乎没有太大的区别，唯一的区别是组件的高亮写法发生了变化

// v5版本

<NavLink to="/home" activeStyle={{color:'#f00'}}>首页</NavLink>

<NavLink to="/home" activeClassName="active">首页</NavLink>

// v6版本

<NavLink to="/home" style={({isActive})=>(isActive{color:'#f00'}:{})}>首页</NavLink>

<NavLink to="/home" className={({isActive})=>isActive'current':''}>首页</NavLink>

PS: 默认已经有一个高亮的active类，可以直接使用，不需要额外设置

使用useNavigate()进行跳转有时候我们并不能使用以上两个组件进行跳转，如根据ajax请求返回值跳转不同的页面，这时我们就得使用js的方式时行跳转了，虽然新版的react-router已经移除掉history对象，但给我们提供了 useNavigate hook实现路由跳转，使用方法如下

import { useNavigate } from "react-router-dom";

let navigate = useNavigate();

navigate(`/home`);

// 跳转且不保留浏览记录

navigate(`/home`,{replace:true});

// 返回上一页

navigate(-1)

// 对象方式跳转

navigate({

pathname:'/home'

})

需要注意一点就是，在v6版本的react-router中，如果跳转的路径如果不是以/开头，则为相对路径，相对于其父级路由路径，这样的设置能让我们更好的控制跳转

路由传参

我们都知道，在进行路由跳转时，可以附带一些参数一起传递到跳转页面，新版的react-router已经从props中移除了history、location、match，也移除掉了withRouter高阶组件，所以无法使用老版本的方式传参与接收，新版用法如下

search传参

let navigate = useNavigate();

navigate(`/homepage=1&size=10`);

navigate({

pathname:'/home',

search:'page=1&size=10'

});

在对应组件接收参数也很简单，使用useSearchParams hook进行接收，得到URLSearchParams对象以及设置search参数函数组成的数据

function Home(){

const [searchParams,setSearchParams] = useSearchParams()

searchParamsget('page');//1

searchParamsget('size');//10

return (

<div>首页</div>

)

}

动态路由传参

<Route path="/user" element={<User/>}>

<Route path=":/id" element={<UserDetail/>} />

</Route>

配置完以上路由后，当页面跳转到/user/123这个路径时，可以在组件中使用useParams hook获取123这个id

function UserDetail(){

const {id} = useParams()

return (

<div>id:{id}</div>

)

}

state传参通过、或 useNavigate进行跳转时，都可以传递state参数，用法如下:

<Link to="/home" state={{idx:1,key:'qf'}}>首页</Link>

navigate('/home',{state:{idx:1,key:'qf'}})

在首页组件中通过useLocation hook获取state值

function Home(){

const {state} = useLocation();

stateidx; // 1

statekey; // qf

return (

<div>首页</div>

)

}

数据传值大概无非是这几种情况。

1父传子

2子传夫

3跨层级组件传值

4路由传值（什么情况都可以用~但是涉及一些长的或者隐私的不建议用）

我这个人对传值这块真的有时候迷迷糊糊的，所以这次刚好复习的时候整理一下传值。

这个是最简单也是最常用的传值了。

前提条件就是父组件要引用子组件！

通常是通过props和ref传值和 方法

props

通过ref传值

父组件可以通过ref选择到子组件的function，如果需要子组件的值则用return

父组件通过 props 向子组件传入一个方法，子组件在通过调用该方法，将数据以参数的形式传给父组件，父组件通过该方法使用数据。

利用 props callback 通信，父组件传递一个 callback 到子组件，当事件触发时将参数放置到 callback 带回给父组件。

使用 Context 作为中间载体传值。避免了在每一个层级手动的传递 props 属性，适合于多层级的时候使用

官方文档

首先：新建 Contextjs

最经典的就是使用 params 传值 需安装react-router-dom

形式：/:xx （xx就是要传值的参数）

怎么用呢？来看以下几步。

首先

路由配置 ：

1 js跳转 ：

thispropshistorypush('/index/mika')

2 标签跳转 :

引入 Link 标签 import { Link } from 'react-router-dom'

使用 Link 标签跳转 <Link to="/index/mika">this is link</Link>

跳转页面接收值 ： thispropsmatchparamsname 其中name就是传的参数值，自己定义了什么就叫什么名字。

还有一种 query 传参

1js跳转：

在要跳转的组件上绑定onClick就可以使用。query为一个对象，携带的是需要传的参数。

不需要提前引入，也不需要路由设置，正常配置就可以 。

跳转页面接收值 ： thispropslocationquery

简单的说一下2个传参的区别：

1 params 传递显示参数， query 传递不显示参数， query 相对于 params 来说较安全一点

2 params 传值页面刷新数据还在，而 query 传值页面刷新数据会消失。

3 params 传值只能传一个， query 可以传多个对象。

那有没有数据传参不显示、刷新地址栏数据也不会小时的方法呢？有啊！

传参的方法和query差不多，属性不一样。

不需要路由配置

1js跳转： thispropshistorypush({pathname:'/index',state:{name:'mima'}})

2 标签跳转 <Link to={{path:'/index',state:{name:'mika'}}}>XX</Link>

跳转页面接收值 ： thispropslocationstatename

以上暂时就这些了 没包括一些传值的包，如果需要可以自己去了解

问题背景

工作项目中两个页面模块基本业务流程和交互都差不多，因此决定用共用同一套组件，通过设置不同的路由，跳转到同一个模块，在模块内部通过路由的参数作区分，现在面临两个问题：

1）不同路由跳转后，组件只会重新渲染（render），而不会整个组件重新构建，即不会重走constructor等生命周期函数

2）共用reducer，需要解决数据相互解耦合，独立问题

路由问题原因和解决方案

react组件是根据diff算法来决定是否更新组件，不同路由跳转，如果组件props没有变化，则认为是同一个组件内部的状态更新，不会重建组件，需要每次跳转需要赋予组件不同的props，在路由组件最上层加上key：

const mapStateToProps = (state, props) => ({

otherData: fun(state),

key: propslocationstatefrom, // 将路由参数中的from赋予key,或者propslocationstatepathname

});

export default connect(mapStateToProps)(MyComponent);

不同mapStateToProps绑定函数时的组件注入key的写法：

export default (props)=><User {props} key={propslocationstatefrom} />

将路由参数from赋予给组件props的key，当不同路由跳转时，组件有了不同的key，因此实现了组件的构建更新

diff算法

diff算法是react的核心思想。当你添加了一个key之后，因为react在重新渲染时，会比较组件是否发生了变更，diff算法包括组件diff,element diff，还有dom树diff。有了key作为标识，react能很快的计算出是否需要重新渲染，如果没有添加key，默认就重新渲染。

在首页 Appjs 中，直接使用 import from 引入组件，并赋值为 <Route></Route> 标签的 component 属性。该引入方式下，无论用户访问的路径定位到哪个路由，都会在渲染之前加载所有的组件。假设用户只访问了 '/' 页面，并没有继续进入 '/cart' 页，那么原先加载的 Cart 组件就不需要被渲染，那么加载 Cart 组件所消耗的时间与带宽都是一种浪费。

为了实现组件的动态加载，可以使用 import() 的动态加载方法，在需要时再加载某一组件。但是， <Route> 标签的 component 属性期待的是一个组件。因此，需要实现一个高阶组件，以动态加载函数为参数，并将加载得到的组件作为结果返回。

在 React Router 中，设置路由的 `path` 函数有三个参数分别对应着：

1 `match`: 匹配当前 URL 的对象。它包含了路由的参数信息，例如 `params`、`url` 和 `isExact` 等。

2 `location`: 当前页面的位置对象。包含了该页面的 URL 地址，以及与 URL 相关的信息，例如 `pathname`、`search` 和 `hash` 等。

3 `history`: 历史记录对象，提供了和浏览器历史记录相关的功能，例如 `push`、`replace` 和 `go` 等。

这三个参数都是 React Router 提供的 API，用于帮助我们在路由中进行匹配和渲染页面。使用 `path` 函数时，我们通过这三个参数来确定当前的路由匹配规则和对应的页面内容。

可以。根据查询回调函数相关资料显示，react路由跳转可以在回调函数里实现。回调函数就是一个被作为参数传递的函数。在C语言中，回调函数只能使用函数指针实现，在C++、Python、ECMAScript等更现代的编程语言中还可以使用仿函数或匿名函数。

以上就是关于this.props 的神奇用法（路由传参）全部的内容，包括:this.props 的神奇用法（路由传参）、react-router钩子函数、reactv6版本的路由跳转之后之前的内容还有怎么解决等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！