2

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

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

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

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

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

2
  • то есть, чтобы люди заходили на http://localhost:3000/, а их перекидывало на http://localhost:3000/auth/pages? 30 мар 2020 в 18:52
  • @Август, да, верно
    – rgdzv
    30 мар 2020 в 18:58

2 ответа 2

3

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

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

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

11
  • подойдет, спасибо
    – rgdzv
    31 мар 2020 в 10:44
  • к сожалению такой рендер будет происходить постоянно, даже если прописывать в адресной строке другие адреса. Можно ли его вызвать 1 раз? Если говорить в целом, мне необходимо чтобы при старте приложения происходил редирект только 1 раз.
    – rgdzv
    31 мар 2020 в 11:21
  • 1
    @rgdzv если у Вас есть какой-то признак, по которому вы можете определить, нужно ли делать редирект, то можно поместить внутри рендер метода компоненту <Redirect /> в условный рендеринг. Ну, типо так: {isRerender && <Redirect />}. Еще расположение Redirect в структуре рутов имеет вляние. Расположив его внизу - другие руты будут работать, а в случае, если дойдет до редиректа - и совпадет по урлу - произойдет редирект, иначе - нет. 31 мар 2020 в 11:29
  • странно, я расположил редирект в самом низу, еще один рут должен работать, однако, когда я забиваю адрес этого рута, то опять происходит редирект
    – rgdzv
    31 мар 2020 в 12:11
  • 1
    @rgdzv а у вас не было <Switch>? Если нет, то да, он нужен. Я как раз написал в комментарии выше про Switch, Route и Redirect в то время, как вы мне ответ в комментарии писали. 31 мар 2020 в 13:07
2
// В компоненте объявляем  
import React, { useEffect } from 'react'
import { useHistory } from 'react-router'

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

// И скажем в useEffect()
useEffect(() => {
push('/auth/pages')
}, [])   // [] - означает выполнить 1 раз (нет зависимостей)
3
  • неплохой вариант, но нужно обойтись без хуков, компонент классовый
    – rgdzv
    31 мар 2020 в 7:21
  • можно ли вызвать такую строку props.history.push('/auth/login') только 1 раз без хука?
    – rgdzv
    31 мар 2020 в 10:41
  • В классовом компоненте можем вызвать так:// в state добавляем boolean переменную; внутри componentDidMount() проверяем нашу переменную, изменяем state делаем вызов push() // только обязательно проверь не вызывает ли такое действие повторный вызов componentDidMount() //
    – santavital
    31 мар 2020 в 14:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.