Реагируйте дважды на рендеринг данных компонента

Question

Я новичок, чтобы реагировать, и в настоящее время я сталкиваюсь с проблемой. Я хочу сделать условный рендеринг таким, чтобы, если URL содержал определенный идентификатор, я рендерил что-то другое, но мои компоненты, кажется, выполняют в основном все несколько раз, если это условие выполнено. Ниже мой код

import React, { useState, useEffect } from 'react';
import DriverList from './DriverList';
import './Drivers.css';
import getDrivers from '../../Helpers/fetchAny';

function Drivers(props) {
  const url = window.location.href.split('/');
  const last = url.length - 1;
  const urlPattern = /([\d\w]*[-]).*/g;
  const id = url[last];
  const [driverState, setDriverState] = useState({ name: 'Hello' 
});
  const [toDisplayState, setToDisplayState] = useState([]);

  useEffect(() => {
    getDrivers('/api/drivers').then(data => {
      setDriverState(data);
    });
  }, []);

  if (!urlPattern.test(url)) {
    return (
      <div className="mainBody drivers">
        <div className="driver-display" />
        <DriverList />
      </div>
    );
  } else {
    return (
      <div>
        <p>Hello</p>
      </div>
    );
  }
}

export default Drivers;

Вопрос в том, что если это условие не выполняется, то оно воспроизводит то, что обычно должно ничего не повторять, но один раз (нормально) при выполнении условия.

Компонент

import React, { useState, useEffect } from 'react';
import getDrivers from '../../../Helpers/getDrivers';

import { Link } from 'react-router-dom';

function DriverList() {
  const [driverState, setDriverState] = useState([]);
  useEffect(() => {
    getDrivers().then(data => {
      let driverDetails = [];

      for (const driver of data) {
        driverDetails.push({
          driverId: driver.driverID,
          driverName: driver.name,
          driverPhone: driver.phone,
        });
      }
      setDriverState(driverDetails);
    });
  }, []);

  return (
    <div className="driver-list">
      <p className="list-head">Drivers</p>
      {driverState.map((driver, index) => {
        return (
          <Link
            to={`/drivers/${driver.driverId}`}
            className="single-list"
            key={index}
          >
            <span className="list-image" />
            <div>
              <span>
                <i className="mdi mdi-account" /> {driver.driverName}
              </span>
              <span>
                <i className="mdi mdi-phone" /> {driver.driverPhone}
              </span>
            </div>
          </Link>
        );
      })}
    </div>
  );
}

export default DriverList;

Показывает список драйверов

Answer 1

Итак, очевидно, я повторил маршрут к этой странице в моем App.js

<Route exact path="/" component={Home} />
<Route path="/dashboard" component={Home} />
<Route path="/trips" component={Trips} />
<Route path="/drivers" component={Drivers} />
<Route path="/drivers:driverId” component={Drivers} />

Все, что мне нужно было сделать, это удалить один из routes.

Мое пониманиеотсюда react отображает when you visit a route` в SPA (одностраничное приложение)