Почему не работает Redirect react?

Question

import React, { useEffect,useState } from 'react'
import { Redirect, useParams } from 'react-router-dom'
import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
import { Header } from 'semantic-ui-react';

export default function GistsContent(props) {
  const [ content, setContent ] = useState('');
  const { gistName } = useParams();
  const selectedGist = props.gistsFiles.find(item => item.filename === gistName)
  
  useEffect(() => {
    fetch(selectedGist.raw_url)
      .then(res => res.text())
      .then(data => setContent(data))
  }, [gistName])

  if(!selectedGist){
    return <Redirect to='/'></Redirect> // не работает
  }

  
  return (
    <div >
      <Header as='h2'>
        {gistName}
      </Header>
      <SyntaxHighlighter language="javascript" className='gistContent'  style={docco}>
        {content}
      </SyntaxHighlighter>
    </div>
  )
}

Answer 1

Потому что Redirect так не работает. Внутри if блока вы возвращаете JSX код что не верно. Если хотите перенаправить пользователя в другой роут в условии то используйте объект history.

import { useHistory } from "react-router-dom";

Внутри функции

const history = useHistory();

И логика

 if( !selectedGist ){
    history.push("/");
 }

А Redirect надо использовать внутри JSX блока

   <Switch>
     <Route path="/" exact>
       <C />
     </Route>
     <Route exact path="/b">
       <B/>
     </Route>
     <Route exact path="/a/:aId">
       <A/>
     </Route>
     <Redirect  to="/"/>
   </Switch>

Таким образом если не один из роутов ( "/", "b", "/a/:aId" ) не сработал то Redirect перенаправит пользователя в роут "/".

БЛОГ НА HUSL

Почему не работает Redirect react?

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