Получить текущий маршрут для react-router

#javascript #reactjs #react-router

Вопрос:

Как я могу получить текущий маршрут? И я имею в виду маршрут, а не путь

После ввода вручную URL-адреса в корневом компоненте моего приложения App.tsx я хочу получить некоторые параметры из URL-адреса

Я попробовал это:

     const match = useRouteMatch({
        path: location.pathname,
        strict: true,
        sensitive: true
    });

Но это не дает мне реквизита.

Итак, мне нужно что-то вроде:

     const match = useRouteMatch({
        path: `/:lang/:car`,
        strict: true,
        sensitive: true
    });

Но мне нужно как-то динамически получить этот путь (маршрут).

Я также пытался использовать useParams из react-router-dom . И сделать что-то вроде:

 const { lang } = useParams<ParamTypes>();

Это также не сработает, если я напишу его в главном компоненте App.tsx. Только в компоненте, который конкретно имеет /:lang в своем маршруте.

Если это было непонятно, я приведу пример.

Допустим, у меня есть эти маршруты:

 <Route path='/'/>
<Route path='/:lang'/>
<Route path='/:lang/:bookId'/>
<Route path='/:lang/:bookId/:author'/>

И я вручную ввожу URL-адрес baseurl/en/21

В App.tsx как я могу получить lang и BookID?

У меня должно быть что-то вроде:

     const match = useRouteMatch({
        path: `/:lang/:bookId`,
        strict: true,
        sensitive: true
    });

Но скажем, я ввожу URL baseurl/en/21/some-name , тогда match const будет равен null. И в этом случае я также хотел бы получить author . Однако я не знаю, какой URL-адрес будет вводить пользователь. Вот почему мне нужно получить маршрут динамически.

1. Я полагаю, все еще неясно, хотите ли вы использовать параметры соответствия, то есть значения или шаблон пути? reactrouter.com/web/api/match path Это шаблон пути, используемый для сопоставления. Измените порядок определенных вами маршрутов, чтобы попытаться сопоставить более конкретные пути перед менее конкретными путями.

2. @DrewReese Параметры соответствия. Я видел документацию для match, но не уделил должного внимания. Я видел, что вы можете указать массив путей. Я расположил их в обратном порядке, как вы сказали (сначала более сложный), и он выполнил свою работу. Спасибо за ваш ответ 🙂

3. Хорошо, хорошо. Отлично, рад, что у тебя все получилось.

Ответ №1:

Попробуй это:

   const findPath() {
    const location = useLocation();
    useEffect(() => {
      const currentPath = location.pathname;
    }, [location]);
    return currentPath;
  }

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

Ответ №2:

попробуйте этот хук:

 import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";

export const useFindPath = () => {
    const location = useLocation();
    const [currentPath, setCurrentPath] = useState();
    useEffect(() => {
        setCurrentPath(location.pathname);
    }, [location]);
    return currentPath;
};

использование:

 const path = useFindPath();

Вывод:
например, «/ about», если текущий URL равен «http://localhost:3000/about «

Ответ №3:

Вот мой код React, написанный в TS, чтобы получить разделенный путь:

 import { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';

/**
 * @function useFindPath
 * @param pathIdx
 * @description - returns a string from the current route based on the path split by `/`.
 * @returns string
 * @example:
 *   - pathIdx = 2
 *   - path = /projects/foo-bar
 *   - return = 'foo-bar'
 */
export const useFindPath = (pathIdx?: number): string => {
  const location = useLocation();
  const [currentPath, setCurrentPath] = useState<string>();

  useEffect(() => {
    const path: string = location.pathname;

    if (pathIdx) {
      const splitPath: string[] = location.pathname.split('/');

      setCurrentPath(splitPath[pathIdx]);
    } else {
      setCurrentPath(path);
    }
  }, [location, pathIdx]);

  return currentPath as string;
};