react-router传递参数的方式

Posted 2023-03-23

参考技术A 参考：https://blog.csdn.net/qq_23158083/article/details/68488831

以下方式基于react router版本为3.0.2

一、params方式传递

1、定义路由到detail页面

import Router,Route,hashHistory from "react-router";

class App extends React.Component

    render()

        return (

            <Router history=hashHistory>

                <Route path="/detail/:personId" component=Detail></Route>

            </Router>

        )

    



2、实现跳转的方式

import Link,hashHistory from "react-router";

2.1、Link组件实现跳转

<Link to="/detail/33">跳转到详情页面</Link>

2.2、history实现跳转

hashHistory.push("/detail/33")

3、目标页面取值的方式

this.props.params.personId

4、该方式只能通过字符串的方式传递参数，如需传递一个对象过去，需要先将对象转化为字符串（JSON.stringify(json)），在目标页面接收后在转化为对象（JSON.parse(string)）

二、query方式传递（类似表单get方法）

1、定义路由到detail页面

<Route path="/detail" component=Detail></Route>

2、实现跳转的方式

const data=id:33,age:56;

const path=

    pathname:"/detail",

    query:data,



<Link to=path>跳转到详情页面</Link>

hashHistory.push(path)

3、目标页面取值方式

this.props.location.query

4、该方式为在url上明文传递，会导致url很长

三、state方式传递（类似表单post方法）

1、使用方式与query方式传递的一样

2、该方式可以传递任意类型的数据，而且是非明文的方式

React-router：如何将 props 传递给子组件？

【中文标题】React-router：如何将 props 传递给子组件？

【英文标题】：React-router: How can props be passed down to child components?

【发布时间】：2015-07-12 22:54:18

【问题描述】：

我不确定我是否以正确的方式处理这个问题，所以先介绍一下背景：

假设我在每个国家/地区都有国家和城市，我将从最顶层路线 (view1) 中的两个商店 CountryStore 和 CityStore 中获取这些数据。我正在尝试设置 react-router 以便我有这样的嵌套路由：

<Route name="app" path="/" handler=App>
   <DefaultRoute name="view2" handler=View2/>
   <Route name="view1" path='country/:countryId'  handler=View1>
        <DefaultRoute name="view3" handler=View3/>
        <Route name="view4" path='city/:cityId'  handler=View4/>
        < More nested routes /> 
   </Route>
</Route>

所以从我一直 reading up 开始，我已经明白我应该在我的顶视图1中有状态并将所有内容作为道具传递给 view3、view4 和任何其他。

所以这里有一个fiddle，我通过在 view1 中使用路由处理程序传递道具来使事情正常进行，并且我从链接中传递参数，每个视图可以根据这些参数过滤掉他们需要的东西。但是我想知道是否有一种更聪明的方法可以通过以某种方式传递每个链接所需的道具来做到这一点。这意味着如果在我的城市列表中我已经遍历了所有城市对象，我可以通过城市链接以某种方式将当前城市作为道具传递下去，这样城市视图就不需要每次都过滤掉它的城市？

我希望问题足够清楚，感谢您的任何建议！

【参考方案1】：

您的问题有点令人困惑（可能是因为非常通用的变量/视图名称），但我想我明白您的意思了。

我认为答案有两个部分：你能做到这一点，你应该这样做。

我相信你绝对有可能可以按照你的建议去做。如果查看View1 中的参数，可以看到当url 为country/1 时，参数为 countryId: "1" ，但当url 为country/1/city/2 时，参数为 countryId: "1", cityId: "2" 。因此，基于此，View1 可以看到 cityId 参数并决定将附加属性传递给其子项，例如：

// In View1
var props = 
  country: testCountry


if (this.props.params.cityId) 
  props.city = (get the city object here);


return (
  <div>View 1 wrapper: countryId countryId
    <RouteHandler ...this.props ...props/>
  </div>
);

但是，我不确定您是否应该。这打破了 React Router 提供的封装；您通过让View1 直接了解其子级View4 的一个 是如何工作的，从而耦合了两个视图。

如果您真的担心多次迭代城市对性能的影响，可能值得提供一个 ID 可索引的数据结构，View4 可以使用它来直接查找城市（例如 @987654334 @)。

退后一步，我个人认为 Bill 在 the answer you linked to 中描述的“获取所有状态并将其作为道具传递”可能会在依赖路由的应用程序中出现一些问题。我认为通过<Route handler=... /> 传递给路由器的每个视图都是一个视图控制器——可以说是一个微型独立应用程序。正如比尔提到的那样，这样做可以更好地封装路由/路由处理程序正在处理的域，并且我认为它不会使调试变得更加困难，因为路由准确地声明了哪个视图充当顶部-任何给定 URL 的级别视图控制器（因此，如果某些数据看起来不正确，您只需立即转到当前路由的视图控制器）。

如果您使用良好的组合策略将您的路由处理程序连接到通量存储（请参阅this Fluxxor issue as an example 处的代码），它会更清楚数据如何从存储获取到组件。

【讨论】：

非常感谢或详细的回答，这正是我所要求的（对不起一般视图名称！）。但是我现在看到，如果唯一的方法是通过道具，就像你说的那样它会破坏封装，那么它是没有意义的。我想我希望我能以某种方式通过链接做到这一点。我将暂时保留它，至少在过滤和复杂的 propType 检查变成问题之前。再次感谢！

@usagidon 啊，是的，您可以通过<Link />s 发送的唯一内容是成为 URL 一部分的参数；你不能发送复杂的对象。但这是有道理的——如果你刷新了会发生什么？如果城市不是 URL 的一部分，那么无论如何您都必须获取它。