时间戳

首页 > 解决方案 > 带有父路径的奇怪的 react-router v4 行为

reactjs - 带有父路径的奇怪的 react-router v4 行为

问题描述

背景故事： 我正在构建这个简单的应用程序，我想让它有漂亮的react-router v4.

我有 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}组件，所以我会在 url 结构中有一些层次结构。

但是，一旦我尝试更改/list/->组件路由，我/hotels/的{List}整个应用程序就会中断，并且会收到来自组件的大量错误{Hotel}，当我尝试将自己从{Home}组件路由到{List}.

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

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

import React from "react";
import { Route, BrowserRouter as Router } from "react-router-dom";

import Home from "./Home";
import List from "./List";
import Hotel from "./Hotel";

import './styles/app.scss';

class App extends React.Component {

  render() {
    return (
      <Router>
        <div className="app">
          <Route path="/" component={Home} exact />
          <Route path="/hotels/:selectedCountry/:datefrom?:dateto?" component={List} />
          <Route path="/hotels/:selectedCountry/:selectedHotel:datefrom?:dateto?" component={Hotel} />
        </div>
      </Router>
    );
  }
};

export default App;

标签： reactjsreact-routerreact-router-v4

解决方案

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

来自 GitHub 的示例：提交列表的 URL：https ://github.com/facebook/react/commits 单个提交的 URL：https ://github.com/facebook/react/commit/ec6691a6

在您的情况下，它将是：

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

推荐阅读