在 react-router 中从类组件路由到功能组件时更新 document.location.pathname

Question

这些是路线：

const routes = [
    { url: "", component: Home }, //class
    { url: "doctors", component: Doctors }, //class
    { url: "activedevices", component: ActiveDevices }, //functional
    { url: "nurses", component: Nurse }, //functional
    { url: "patients", component: PatientTable }, //functional
    { url: "floor-management", component: FloorManagement }, //class
    { url: "organizations", component: Organizations }, //functional
]

              <Switch>
                {routes.map((data, i) => (
                  <Route
                    key={i}
                    exact
                    path={`/${data.url}`}
                    component={data.component}
                  />
                ))}
                <Route path="*" component={()=> <Redirect to='/' />} />
              </Switch>

我正在使用 window.location.pathname 来确定当前路径并突出显示相应的菜单项。

Dashboard

Patients

Floor Management

当我尝试在类到类组件或类到功能组件之间导航时，它工作正常。但是当我尝试功能组件时，window.document.pathname 不会更新，这导致相应的菜单项没有被突出显示，最后一个仍然被突出显示。但路由仍然有效，我被路由到点击的路由，它还在地址栏中显示更新的路由，但不在脚本内。

这些图片在地址栏中显示更新路线，但不在路径名中：

Nurses

Active Devices

这是一个功能组件的代码：

import React, { useState, useRef, useEffect } from "react";
import { Table, Pagination, Badge, Dropdown } from "react-bootstrap";


import { Link } from "react-router-dom";
import ActiveDevicesRow from "./ActiveDeviceRow";

import {baseURL, API, BEARER_TOKEN} from '../../../config'


const ActiveDevices = () => {

   const [activeDevices, setActiveDevices] = useState(null)
   let serial=1;

   var myHeaders = new Headers();
   myHeaders.append("Authorization", BEARER_TOKEN);

   var requestOptions = {
     method: 'GET',
     headers: myHeaders,
     redirect: 'follow'
   };

   async function getActiveDevices(){
      await fetch(baseURL+API.DEVICES, requestOptions)
      .then(res => res.json())
      .then(res => {
         if(Array.isArray(res)) setActiveDevices(res)
      })
      .catch(err => console.log(err))

      // console.log(activeDevices)
   }

   useEffect(()=>{
      getActiveDevices()
   }, [])

   const [data, setData] = useState(
      document.querySelectorAll("#ActiveDevices_basic_table tbody tr")
   );
   
   const sort = 5;
   const activePag = useRef(0);
   const [test, settest] = useState(0);

   // Active data
   const chageData = (frist, sec) => {
      for (var i = 0; i < data.length; ++i) {
         if (i >= frist && i < sec) {
            data[i].classList.remove("d-none");
         } else {
            data[i].classList.add("d-none");
         }
      }
   };
   // use effect
   useEffect(() => {
      setData(document.querySelectorAll("#ActiveDevices_basic_table tbody tr"));
   }, [test]);

   // Active pagginarion
   activePag.current === 0 && chageData(0, sort);
   // paggination
   let paggination = Array(Math.ceil(data.length / sort))
      .fill()
      .map((_, i) => i + 1);

   // Active paggination & chage data
   const onClick = (i) => {
      activePag.current = i;
      chageData(activePag.current * sort, (activePag.current + 1) * sort);
      settest(i);
   };
   // console.log(document.querySelectorAll(".sorting_1 input")[0].checked);

   return (
      <div className="col-12">
         <div className="card">
            <div className="card-header">
               <h4 className="card-title">Active Devices</h4>
            </div>
            <div className="card-body">
               <Table responsive className="w-100">
                  <div
                     id="ActiveDevices_basic_table"
                     className="dataTables_wrapper"
                  >
                     <table
                        id="example5"
                        className="display dataTable no-footer w-100"
                        style={{ minWidth: 845 }}
                        role="grid"
                        aria-describedby="example5_info"
                     >
                        <thead>
                           <tr role="row">
                              <th
                                 className="sorting"
                                 tabIndex={0}
                                 aria-controls="example5"
                                 rowSpan={1}
                                 colSpan={1}
                                 aria-label="Patient ID: activate to sort column ascending"
                                 style={{ width: 73 }}
                              >
                                 S.R. No.
                              </th>
                              <th
                                 className="sorting"
                                 tabIndex={0}
                                 aria-controls="example5"
                                 rowSpan={1}
                                 colSpan={1}
                                 aria-label="Date Check in: activate to sort column ascending"
                                 style={{ width: 100 }}
                              >
                                 ID
                              </th>
                              <th
                                 className="sorting"
                                 tabIndex={0}
                                 aria-controls="example5"
                                 rowSpan={1}
                                 colSpan={1}
                                 aria-label="Patient Name: activate to sort column ascending"
                                 style={{ width: 100 }}
                              >
                                 Name
                              </th>
                              <th
                                 className="sorting"
                                 tabIndex={0}
                                 aria-controls="example5"
                                 rowSpan={1}
                                 colSpan={1}
                                 aria-label="Doctor Assgined: activate to sort column ascending"
                                 style={{ width: 120 }}
                              >
                                 Serial
                              </th>
                              <th
                                 className="sorting"
                                 tabIndex={0}
                                 aria-controls="example5"
                                 rowSpan={1}
                                 colSpan={1}
                                 aria-label="Disease: activate to sort column ascending"
                                 style={{ width: 62 }}
                              >
                                 DeviceType
                              </th>

                              <th
                                 className="sorting"
                                 tabIndex={0}
                                 aria-controls="example5"
                                 rowSpan={1}
                                 colSpan={1}
                                 aria-label="Action: activate to sort column ascending"
                                 style={{ width: 47 }}
                              >
                                 State
                              </th>
                           </tr>
                        </thead>
                        <tbody>
                           {activeDevices && activeDevices.length !== 0 ? activeDevices.map((device, index)=>
                                 <ActiveDevicesRow 
                                 key={'device'+device.id}
                                 srNo={serial++}
                                 id={device.id}
                                 serial={device.serial}
                                 name={device.name}
                                 deviceStatus={device.isActive}
                                 deviceType={device.deviceType}
                                 onClick=""
                              />
                           )
                           : <tr><td colSpan='7' style={{textAlign:'center'}}>No Data Available</td></tr>

                        }
                        </tbody>
                     </table>

                     <div className="d-flex justify-content-between align-items-center mt-3">
                        <div className="dataTables_info">
                           Showing {activePag.current * sort + 1} to{" "}
                           {data.length > (activePag.current + 1) * sort
                              ? (activePag.current + 1) * sort
                              : data.length}{" "}
                           of {data.length} entries
                        </div>
                        <div
                           className="dataTables_paginate paging_simple_numbers"
                           id="example5_paginate"
                        >
                           <Link
                              className="paginate_button previous disabled"
                              to="#"
                              onClick={() =>
                                 activePag.current > 0 &&
                                 onClick(activePag.current - 1)
                              }
                           >
                              Previous
                           </Link>
                           <span>
                              {paggination.map((number, i) => (
                                 <Link
                                    key={i}
                                    to="#"
                                    className={`paginate_button  ${
                                       activePag.current === i ? "current" : ""
                                    } ${i > 0 ? "ml-1" : ""}`}
                                    onClick={() => onClick(i)}
                                 >
                                    {number}
                                 </Link>
                              ))}
                           </span>
                           <Link
                              className="paginate_button next"
                              to="#"
                              onClick={() =>
                                 activePag.current + 1 < paggination.length &&
                                 onClick(activePag.current + 1)
                              }
                           >
                              Next
                           </Link>
                        </div>
                     </div>
                  </div>
               </Table>
            </div>
         </div>
      </div>
   );
};

export default ActiveDevices;

这是一个类组件的代码：

import React, { Component } from "react";
import { Dropdown } from "react-bootstrap";
import { Link } from "react-router-dom";
import DoctorsAccordion from "./DoctorsAccordion";

class Doctors extends Component {

  componentDidMount(){
    document.title = "Active Doctors"
  }

  render() {
    return (
      <React.Fragment>
        <div className="form-head d-flex mb-3 mb-lg-5 align-items-start">
          <Link onClick={this.onClick} className="btn btn-danger">
            + New Doctor
          </Link>
          <div className="input-group search-area ml-auto d-inline-flex">
            <input type="text" className="form-control" placeholder="Search here" />
            <div className="input-group-append">
              <span className="input-group-text c-pointer">
                <i className="flaticon-381-search-2"></i>
              </span>
            </div>
          </div>
          <Dropdown className="ml-3">
            <Dropdown.Toggle variant="outline-primary" id="dropdown-basic">
              <i className="flaticon-381-controls-3 "></i> Filter
            </Dropdown.Toggle>

            <Dropdown.Menu className="dropdown-menu-right">
              <Dropdown.Item href="#">A To Z List</Dropdown.Item>
              <Dropdown.Item href="#">Z To A List</Dropdown.Item>
            </Dropdown.Menu>
          </Dropdown>
          <Dropdown className="ml-3">
            <Dropdown.Toggle variant="outline-primary" id="dropdown-basic">
              Newest
            </Dropdown.Toggle>

            <Dropdown.Menu className="dropdown-menu-right">
              <Dropdown.Item href="#">Newest</Dropdown.Item>
              <Dropdown.Item href="#">Old</Dropdown.Item>
            </Dropdown.Menu>
          </Dropdown>
          <Link onClick={this.onClick} className="btn btn-outline-primary ml-3">
            <i className="flaticon-381-menu-1 mr-0"></i>
          </Link>
         
        </div>

        <DoctorsAccordion />
      </React.Fragment>
    );
  }
}

export default Doctors;

这是一个屏幕截图，显示地址栏中的功能组件路径正在更新，但没有登录控制台：

Screenshot of functional comp path not logged

Answer 1

为什么你不能使用`

props.location.pathnameinsted 的 window.location.pathname 确定当前路径并参考此链接Read the current full URL with React?