如何在路由路径中传递键值对作为参数?

Question

react文档中说，match对象包含一个param属性，该属性被分配给具有Key/value pairs parsed from the URL corresponding to the dynamic segments of the path的对象。

当我试图传递键值对作为参数时，我只得到键，但值总是未定义的。

<Route path="/location:color?" component={Location} />

如果我这样做，然后在Location组件中，我将控制日志道具。match，我得到匹配对象，但是当我打开它时，我得到这个:params: {color: undefined}.

如何传递值?

另外，我觉得我误解了这些路径参数，因为它们的意义到底是什么?如果我想向任何组件传递任何值，我可以使用props。这些路径参数的目的是什么?

Answer 1

对于所有复杂的数据结构，我建议解析为字符串，并在另一端进行反序列化。如果团队中的每个人都这样做，这可能是一个很好的实践。例子:

KeyValuePair : <Color,Blue> 
Parse it to string : ""Color","Blue" 

Answer 2

使用path="/location/:color?"的想法:

• 是根据页面的id获取/导航到页面以获取信息例如，我想在页面上获取学生信息，首先，它将转到URLwww.location/studentId，它将使用学生id来知道在页面上查看哪个学生。

• 在你的例子中，你得到undefined，因为你没有传递任何颜色值，所以你需要传递这个值来导航，如下所示:

  - change `<Route path="/location:color?" component={Location} />` 
  to `<Route path="/location/:color?" component={Location} />`
  -  To navigate use `this.props.history.replace("/location/" + this.props.color);`
  

请阅读这篇文章，它会给你更多关于react-routes的想法article

或React路由文档