Использование функциональности React Router вне рендеринга

Question

Я заметил, что во всех примерах, предоставленных React Router, он использует объекты Router как часть пользовательского интерфейса, который отображается. Но у меня есть ситуация, когда мне нужно использовать объект Redirect вне кода рендеринга. У меня есть набор вкладок, и когда пользователь нажимает на вкладку, мне нужно перенаправить на другой URL.

Я обнаружил одно место в документации по маршрутизатору, где показано, как использовать объект маршрутизатора как часть. нормального Javascript кода, который не является частью рендеринга, но я не смог найти его снова. По сути, я хочу сделать что-то вроде этого:

function doRedirect() {
    return  (<Redirect to={"/" + user.username + "/projects"} />);
}

Но это не удастся скомпилировать. Как использовать функцию перенаправления, используя угловые скобки внутри нормального Javascript кода?

Answer 1

Вы можете использовать useHistory крючок, затем просто history.push(url) или history.replace(url), например:

import { useHistory } from 'react-router-dom'

const MyComponent = ({ user }) => {
   const history = useHistory()

   function handleClick() {
     history.replace(`/${user.username}/projects`)
   }

   return (
     <button onClick={handleClick}>Redirect to Projects</button>
   )
}

Это всего лишь пример, но, очевидно, вы можете использовать его с довольно большим количеством гибкость.

См. этот вопрос для pu sh vs replace