Как установить точный маршрут в адресной строке при запуске приложения, используя react-router-dom?

Question

Пример: наше приложение запускается, адрес в адресной строке следующий http://localhost:3000/

При этом Route выглядит следующим образом

<Route exact path='/'>
  <LogIn/>
</Route>

В данном случае будет отображаться компонент LogIn

Мне необходимо, чтобы при запуске приложения отображался определенный компонент, т.е. при запуске в адресной строке сразу было, скажем http://localhost:3000/auth/pages Как при этом правильно выстроить path?

Answer 1

// В компоненте объявляем  
import React, { useEffect } from 'react'
import { useHistory } from 'react-router'

const MyComponent = () => {
const { push } = useHistory()

// И скажем в useEffect()
useEffect(() => {
push('/auth/pages')
}, [])   // [] - означает выполнить 1 раз (нет зависимостей)

Answer 2

Самый простой вариант, на мой взгляд, это использовать редирект. Просто рядом с рутами нужно написать следующую строку:

<Redirect from="/" to="/auth/pages"/>

Это выполнит редирект из корневого пути / в /auth/pages. Почитать можно тут: Redirect

БЛОГ НА HUSL

Как установить точный маршрут в адресной строке при запуске приложения, используя react-router-dom?

Ответы (2 шт):