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>
)
}
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
перенаправит пользователя в роут "/"
.