реагировать роутер dom не обновляет компонент класса при изменении URL - PullRequest
Новая
       5

реагировать роутер dom не обновляет компонент класса при изменении URL

1 голос
/ 05 февраля 2020

Я новичок в ReactJS. Я хотел бы спросить, как правильно обновлять компонент при изменении параметра URL.

Мой код просто не обновляет компонент CustomerDetails при изменении URL-адреса с customer/1 на customer/2. 

import React from "react";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import { CustomerList } from "./components/Customer/List";
import { CustomerDetails } from "./components/Customer/Details";

export class App extends React.Component<{}> {
  render(): React.ReactNode {
    return (
      <Router>
        <div>
          <nav>
            <li>
              <Link to="/customer">User list</Link>
            </li>
            <li>
              <Link to="/customer/1">Test Customer details 1</Link>
            </li>
            <li>
              <Link to="/customer/2">Test Customer Details 2</Link>
            </li>
          </nav>
          <Switch>
            <Route path="/customer/:customerId" component={CustomerDetails} />
            <Route path="/customer" component={CustomerList} />
          </Switch>
        </div>
      </Router>
    );
  }
}

Мой компонент класса CustomerDetails выглядит следующим образом. 

import * as React from "react";
import { RouteComponentProps } from "react-router-dom";

export interface CustomerDetailsParams {
  customerId: string;
}

export interface CustomerDetailsProps extends RouteComponentProps<CustomerDetailsParams> {
}

export interface CustomerDetailsState {
  customerId: string;
}

export class CustomerDetails extends React.Component<CustomerDetailsProps, CustomerDetailsState> {

  constructor(props: CustomerDetailsProps) {
    super(props);
    const params: CustomerDetailsParams = props.match.params;
    this.state = {
      customerId: params.customerId
    };
  }

  render(): React.ReactNode {
    return (
      <div className="customer-detail">
        <h2>customer details id: {this.state.customerId}</h2>
      </div>
    );
  }

}

Почему компонент Route не воссоздает компонент CustomerDetails? Как это работает? Это не работает, когда я переключаюсь только между ссылками customer/1 и customer/2.

Я использую react-router-dom@5.1.2, react@16.12.0, react-dom@16.12.0

Ответы [ 2 ]

1 голос
/ 05 февраля 2020

Вы устанавливаете состояние в конструкторе CustomerDetails, но никогда не обновляете его. Итак, что касается компонента, ничего не изменилось и обновление не требуется.

Вам, вероятно, вообще не нужен этот дублированный реквизит в состоянии, и вы можете ссылаться на него в props напрямую следующим образом: 

<h2>customer details id: {this.props.match.params.customerId}</h2>

Затем он обновится, как ожидается.

0 голосов
/ 05 февраля 2020

Полагаю, вы, возможно, используете exact prop Link и Route, чтобы объявить маршрут /customer только для компонента CustomerList. Следовательно, вы должны написать так: 

  <nav>
    <li>
      <Link exact to="/customer">User list</Link>
    </li>
    <li>
      <Link to="/customer/1">Test Customer details 1</Link>
    </li>
    <li>
      <Link to="/customer/2">Test Customer Details 2</Link>
    </li>
  </nav>

А также на Route используя: 

  <Switch>
    <Route exact path="/customer" component={CustomerList} />
    <Route path="/customer/:customerId" component={CustomerDetails} />
  </Switch>
...