React component rendering data twice

Question

I'm new to react and I'm currently facing an issue. I want to make a conditional rendering such that if the URL contains a particular id I render something else but my components seems to be doing basically everything multiple times if this condition is met. Below is my code

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;

The question is if this condition is not met, it renders what it's supposed to normally not repeating anything but once (normal) when the condition is met.

The component

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;

This shows the list of drivers

Answer 1

So apparently, I had repeated the route to that page in my 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} />

All I had to do was remove onE of the routes .

My understanding from this is that react renders when you visit a route` in a SPA (single page application)