Как сделать рендер элемента при определенном условии?

Question

После того как пользователь залогиниться, должна открываться страница с его профилем, иначе открывается форма с логином.Информация о том залогинился ли пользователь находится this.state.user

 render() {
    return (
        <Router>
        <Route exact path="/" component={Login} />
        <Route path="/registration" component={RegistrForm} />
        <Route path="/id"   render={this.state.user ? (<MainPage />) : (<Login />)} />
        </Router>
    );
  }

Answer 1

Подробный пример можно посмотреть тут:
https://reacttraining.com/react-router/web/guides/quick-start

Answer 2

1 вариант:

Если пишешь функциональные компоненты, то есть хук useHistory

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

Внутри компонента (где происходит авторизация, как я понимаю, это компонент Login) вызови:

const history = useHistory();

И при успешном входе вызывай:

history.push('/куда_надо_урл')

2 вариант:

Делаешь обертку для роутов PrivateRoute, например:

const PrivateRoute = ({ component: Component, ...rest }) => {

  const user = {
    isFakeAuth: true,
  };

  return (
    <Route
      {...rest}
      render={(props) =>
        user.isFakeAuth ? (<Component {...props} />) : (<Redirect to="/" />)
      }
    />
  );
};

И вместо обычного Route оборачиваешь те роуты в PrivateRoute, куда могуть войти только авторизованные пользователи

БЛОГ НА HUSL

Как сделать рендер элемента при определенном условии?

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