ReactRouter: добавление типов в функцию NavLink isActive ()

Question

В настоящее время я работаю над проектом React с использованием TypeScript и ReactRouter . В каком-то месте я использую хук NavLink следующим образом:

const {itemPath} = props  // itemPath is a string

return (
  <Router>
    <div>
      <ul>
        <li>
          <NavLink 
            to="/"
            isActive={(match: any, location: any): boolean => {
              if (!match) {
                return false;
              }

             if (location.pathname === itemPath) return true;

             return false;
          >
            Home
          </NavLink>
        </li>
        ...

Как вы можете видеть, в функции isActive я просто возвращаю true, если фактический путь (location.pathname) тоже равно itemPath, которое исходит от реквизита.

Проблема здесь в том, что я использую тип any для обоих аргументов обратного вызова isActive: match и location. Поэтому я решаю присваивать им правильный тип, но в документации сказано использовать это определение типа, использующее обобщенные значения:

isActive?<Params>(match: match<Params>, location: Location<History<HistoryLocationState = History.PoorMansUnknown>.PoorMansUnknown>): boolean

К сожалению, я вообще не знаю, как набирать аргументы. У кого-нибудь есть идеи?

Answer 1

Я бы использовал useHistory или useLocation крючок.

const {itemPath} = props  // itemPath is a string

const location = useLocation()
// or const { location } = useHistory()


return (
  <Router>
    <div>
      <ul>
        <li>
          <NavLink 
            to="/"
            isActive={() => itemPath === location.pathname}
          >
            Home
          </NavLink>
        </li>
// ... rest

Если вы хотите ввести аргументы, текущее определение:

isActive?<Params extends { [K in keyof Params]?: string }>(
    match: match<Params>,
    location: H.Location<S>,
): boolean;

Я считаю, что машинопись может правильно выводить типы аргументов, если вы их опускаете. Так что примерно такого было бы достаточно:

isActive={(match, location) => {
    if (!match) {
        return false
    }

    if (location.pathname === itemPath) return true

    return false
}}

Источник: https://reacttraining.com/react-router/web/api/Hooks/uselocation

Answer 2

import React from 'react';
import {withRouter} 'react-router-dom';

    const YourComponent=({history})=>(
      <Navbar>
          <NavLink 
            to="/"
            isActive={'/'===history.location.pathname}
          >
            Home
          </NavLink>
        <NavLink 
            to="/categories"
            isActive={'categories'=== history.location.pathname}
          >
            Categories
          </NavLink>
      </Navbar>
);

export default withRouter(YourComponent)