React Условный рендеринг ничего не показывает

Question

Реагирует приложение с response-router-dom: 4.3.1 :

Main App.js рендер:

render() {
        let routes = (
            <Switch>
                <Route component={LogIn} path="/login" />
                <Redirect to="/login" />
            </Switch>
        );

        if (this.props.isAuthenticated) {
            routes = (
                <Switch>
                    <Route component={ParcelListView} path="/" exact />
                    <Route component={StatusTable} path="/status" />
                    <Redirect to="/" />
                </Switch>
            );
        }

        return (
            <div className="app">
                {routes}
            </div>
        );
    }

Я вижу белый экран При использовании этого кода, но когда я назначаю маршруты первый или второй Переключатель без , если , он отлично работает в обоих случаях.

Полагаю, проблема связана с присваиванием в блоке , если . Это какая-то асинхронная вещь?

Answer 1

Вы можете установить маршруты внутри компонента <Switch /> независимо от сценария и иметь либо публичные , либо частные компоненты маршрутов. Вот общий подход:

const PublicRoute = ({
 isAuthenticated,
 component: Component,
 ...rest
}) => (
<Route
  {...rest}
  component={props => (
    isAuthenticated ? (
      <Redirect to="/somewhere" />
    ) : (
    <Component {...props} />
  ))}
 />
);

const PrivateRoute = ({
  isAuthenticated,
  component: Component,
  ...rest
}) => (
<Route
  {...rest}
  component={props => (
    isAuthenticated ? (
      <div>
        <Header />
        <Component {...props} />
      </div>
    ) : (
    <Redirect to="/login" />
  )
  )}
  />
);

Оба компонента принимают component (функция) и isAuthenticated (логическое значение) в качестве реквизитов, и мы все равно пропускаем остальные реквизиты ({...rest}) (path и т. Д.)

Таким образом, вы можете разрешить / запретить маршруты на основе props, передаваемого вашим компонентам:

...your code

render() {
 <Switch>
  <PublicRoute path="/" component={YourPublicComponent} />
  <PrivateRoute path="/" isAuthenticated component={ParcelListView} />
 </Switch>
}

Больше на сайте Тайлера Макгинниса: https://tylermcginnis.com/react-router-protected-routes-authentication/ Еще один пост на эту тему: https://medium.com/@tomlarge/private-routes-with-react-router-dom-28e9f40c7146

В Интернете вы сможете найти много материала по этой теме.