Блог

Главная - Вопросы по программированию - Как создать пользовательскую логику и перенаправить на другие страницы в react или nextjs с помощью useEffect hook

Как создать пользовательскую логику и перенаправить на другие страницы в react или nextjs с помощью useEffect hook

#reactjs #next.js

#reactjs #next.js

Вопрос:

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

То, что я делаю, это создаю общий компонент verify.js и перенаправить пользователя.

В verify.js

 const verify = ({router: {query}}) => {

     const router = useRouter()

     useEffect(() => {
      if(query.level === 'junior') return router.push('/junior')
      
      if(query.level === 'senior') return router.push('/senior')

      if(query.level === 'superSenior') return router.push('/super-senior')
     })

      return <h1>Loading...</h1>
}

Проблема в том, что я не могу снова вернуться на домашнюю страницу. Когда я однажды выбрал.

Комментарии:

1. перепроверьте написание первой строки 1: «qery» и строки 5: «useEfect».

2. используйте router.replace вместо push, поэтому всякий раз, когда вы нажимаете назад, он переходит на 2-й последний в истории

Ответ №1:

Самый простой способ перенаправить пользователя на разные маршруты вы можете использовать перенаправление, поставляемое с react-router, и самый простой — это перехват useHistory.

Я приведу пример хука useHistory

  import {useHistory} from 'react-router-dom'
 
 const history = useHistory()
 const verify = ({router: {query}}) => {

     const router = useRouter()

     useEffect(() => {
      if(query.level === 'junior'){ history.push('/junior') }
  
      if(query.level === 'senior'){ history.push('/senior') }

      if(query.level === 'superSenior'){ history.push('/super-senior') }
     })

      return <h1>Loading...</h1>
}