Question

背景故事：我正在构建这个简单的应用程序，并希望使用react-router v4使它具有漂亮的url。

我有3个主要组成部分：{Home}，{List}，{Hotel}：

{Home}组件-一个简单的组件，我可以在其中选择country，datefrom和dateto并将自己路由到{List}。

当前路径示例：http://url.com/

{List}组件-一个沉重的组件，里面装满了带有/ hotel /路线链接的旅馆卡。

当前路径示例：http://url.com/list/country/?datefrom=2019-01-01?dateto=2020-01-01

{Hotel}组件-应用程序的大部分，包括酒店信息和按天划分的价格清单的重组成部分。

当前路径示例：http://url.com/hotel/country/hotel-name/?datefrom=2019-01-01?dateto=2020-01-01

问题：我要尝试的是替换/list/并将/hotels/用作{List}组件，所以我会有一些网址结构中的层次结构。

但是，一旦我尝试将/list/-> /hotels/更改为{List}的组件路线，我的整个应用程序就会中断，并且{{1 }}组件，当我尝试将自己从{Hotel}组件路由到{Home}时会发生这种情况。

我尝试过的操作：我尝试使用{List}组件，它使<Switch>-> {Home}路由有效，但是当我尝试时以便将自己进一步路由到{List}组件，它实际上会显示在页面底部，并且不会替换我的{Hotel}

这是我的app.js文件，它给了我奇怪的行为...

{List}

Answer 1

Hotel和List指的是同一个酒店资源，但是Hotel指的是单个酒店，即单数，而List指的是索引酒店，即复数。通常，路由是通过具有单数和复数的路由来完成的。

示例取自GitHub：提交列表的URL：https://github.com/facebook/react/commits 一次提交的网址：https://github.com/facebook/react/commit/ec6691a6

在您的情况下，它将是：

<Route path="/hotels/your-search-params here" component={List} />
<Route path="/hotels/:hotelId:" component={Hotel} />

Answer 2

您的路线定义不正确。

例如看一下路由路径/hotels/:country/:id/:fromDate/:toDate，这样的/hotels/usa/123/2019-01-01/2019-12-30这样的网址将正确映射到路由参数，您可以在组件中访问这些值，例如this.props.match.params.id等，但是如果需要的话要采用查询参数方法，则需要在两个参数之间添加&，例如/hotels?country=usa&id=123&fromDate=2019-01-01&toDate=2019-12-30，然后从window.location.href访问它并解析查询参数，或使用{ {1}}进行解析。在这种情况下，您的路由路径将仅为query-params

具有父路径的奇怪React-Router V4行为

2 个答案: