Блог

Я пытаюсь создать защищенные маршруты в своем приложении react. Если я перехожу на защищенный маршрут и не перенаправляюсь, мне выдается пустой экран, а компонент не отображается / не отображается?

Если это так, компонент не отображается:

 <ProtectedRoute exact path="/home" component={Home} />
 

Если это так, он отображается:

 <Route exact path="/home" component={Home} />
 

Защищенный маршрут:

 import auth from '../utilities/auth';
import { Route, Redirect } from 'react-router-dom';

function ProtectedRoute({ component, ...rest }) {
  return (
    <Route {...rest} render={() => {
      return auth.isAuthenticated()
        ? component
        : <Redirect to='/accounts/login' />
    }} />
  )
}

export default ProtectedRoute;
 

Вам нужно на самом деле визуализировать компонент. Прямо сейчас вы просто возвращаете компонент, но не визуализируете его. Просто возвращаясь , component вы делаете эквивалент возвращения Home , в то время как то , что вы должны делать , — это возвращение <Home /> .

То, что вы должны делать, это что-то вроде

 // assigning component to Component so React knows it's a custom component when you render it
function ProtectedRoute({ component: Component, ...rest }) {
  return (
    <Route {...rest} render={() => {
      return auth.isAuthenticated()
        ? <Component /> // so you're actually rendering the component
        : <Redirect to='/accounts/login' />
    }} />
  )
}