React Router: как правильно добавить маршрут / URL-адрес, ничего не заменяя?
Как мне добавить маршрут с помощью реактивного маршрутизатора?
Допустим, текущий маршрут /page1/page2, и я хочу проложить маршрут до /page1/page2/next-page
сначала я получаю маршрутизатор
const router = useHistory();
Когда я использую push вот так
router.push("next-page");
Он направляется к /page1/next-page.
Когда я использую, добавляю / вот так
router.push("/next-page");
Он направляется к /next-page
Я также пробовал что-то вроде этого
router.push(`${router.location.pathname}/next-page`)
Но проблема в том, что когда я сейчас нахожусь в /page1/page2/, я оказываюсь в /page1/page2//next-page с двумя //.
Есть ли хороший способ решить эту проблему без необходимости писать полный маршрут, например router.push("/page1/page2/next-page")?
Ответы 3
Если вы сделаете router.push("/page1/page2/next-page"), это должно сработать. Думаю нужно указывать полный путь, не вижу в этом ничего плохого
если вы хотите добавить что-то к существующему пути, вы сможете сделать что-то вроде
const location = useLocation()
const currentPath = location.pathname // to get current route
router.push(`${currentPath}/next-page`)
Это sudo-код, поэтому вам может потребоваться немного изменить его для правильного синтаксиса.
В итоге я определил функцию, которая удаляет / из URL-адреса, если есть
export const removeSlashSuffix = (input) => {
if (input.charAt(input.length - 1) === "/") {
return input.substr(0, input.length - 1)
} else {
return input;
}
}
а затем маршрут, как это
router.push(`${removeSlashSuffix(router.location.pathname)}/nest-page`)
Таким образом, у меня не возникает проблем с маршрутами, которые разрешаются в URL-адресе с // в нем.
Это несколько хакерское решение, и я бы хотел, чтобы react-router-dom поддерживал его из коробки, но, похоже, это не так.
Это именно то, чего я не хочу делать. Я не хочу указывать полный путь, потому что в некоторых ситуациях я не знаю полного пути, я просто хочу добавить что-то к существующему пути