В: Как настроить сочетание publi c и защищенных маршрутов? (React Router)

Question

В настоящее время я работаю над проектом, в котором мне нужно настроить некоторую (на мой взгляд) сложную маршрутизацию с React Router . Я начал использовать его только неделю go, и в этот момент я поражен, так как не уверен, как это сделать.

Мне хотелось бы иметь рабочий скелет для работы, где я могу реализовать реальный лог c вызовов API для получения пользовательских данных и так далее. Следовательно, фиктивная аутентификация.

Дополнительная информация: я буду использовать UI материала для разработки приложения.

https://codesandbox.io/s/sleepy-haze-1ug25?file= / src / App. js

---

1. Структура

1. StartContent (доступно только при выходе из системы)

   • LogIn (необходимо показать первым)
   • SignUp
   • ForgotPassword

2. MainContent (доступно только при входе в систему, ссылки находятся внутри боковой панели)

   • Overview (должен отображаться первым)
   • Cashbacks
   • BankNew
   • BankExisting
   • Transactions
   • Settings
   • FAQ
   • LogOutButton

3. FooterContent (всегда доступно, но только если выбрано, ссылки находятся внутри Footer компонент)

   • Imprint
   • TermsAndConditions
   • PrivacyPolicy

---

2. Пользовательский поток

1. Пользователь должен войти в систему, компонент LogIn - первое, что показывает. Это дочерний компонент StartContent, который содержит LogIn, SignUp и ForgotPassword. Пользователь может перемещаться между тремя компонентами.

2. После входа в систему StartContent больше не доступен, и отображаются Navigation и MainContent. Navigation будет содержать другой компонент с именем SideDrawer, который откроет боковую панель, чтобы пользователь мог выбирать и перемещаться. Для простоты я изменил пример с React Router .

3. При выходе из системы снова будет доступно только содержимое StartContent, и сначала будет отображаться LogIn .

4. Компонент Footer должен быть всегда доступен, независимо от того, вошел он в систему или нет. Через него пользователь может получить доступ к FooterContent.

---

3. Вопросы

На данный момент я могу получить доступ только к PrivateRoute, нажав на соответствующую ссылку. Как настроить маршрутизацию, чтобы сначала показывать LogIn, когда не вошел в систему? Я не хочу нажимать на эту ссылку, чтобы попасть туда и хотел бы от нее избавиться.

После входа в систему появляется боковая панель и кнопка выхода из системы работает нормально, но как только я выберите один из маршрутов MainContent s, боковая панель исчезнет и контент не будет отображаться. Как я могу это исправить? Сама по себе боковая панель работает нормально.

Footer компонент всегда должен быть доступен. Через него вы можете получить доступ к детям FooterContent. Как настроить его так, чтобы он работал независимо от того, вошел я в систему или нет?

---

Большое спасибо за то, что прочитали и нашли время помочь мне, я действительно ценю это!

Если вам нужна дополнительная информация или если что-то не понятно, пожалуйста, дайте мне знать. Я знаю, что это много ...

Answer 1

Похоже, вам нужна полная структура маршрутизации. Вот идея / пример этого:

основной файл маршрута

return (
  <BrowserRouter>
    <Switch>
    <PublicRoute component={Login} path="/login" exact />
    <PublicRoute  component={SignUp} path="/signup" exact />
    <PublicRoute component={ForgotPassword} path="/forgot-password" exact />
    <PrivateRoute component={Overview} path="/overview" exact />
    <PrivateRoute component={Cashbacks} path="/cashbacks" exact />
    <PrivateRoute component={BankNew} path="/bank-new" exact />
    <PrivateRoute component={BankExisting} path="/bank-existing" exact />
    <PrivateRoute component={Transactions} path="/transactions" exact />
    <PrivateRoute component={Settings} path="/settings" exact />
    <PrivateRoute component={FAQ} path="/faq" exact />
    </Switch>
  </BrowserRouter>
);

publicRoute

const PublicRoute = ({component: Component, ...rest}) => {
    return (
        <Route {...rest} render={props => (
            // if user is already logged in, then redirect to the dashboard/overview page
            isLogin()?
                <Redirect to="/overview" />
            : <Component {...props} />
        )} />
    );
};

privateRoute

const PrivateRoute = ({component: Component, ...rest}) => {
    return (
        <Route {...rest} render={props => (
            // if user has not logged in then redirect him to /login page
            isLogin() ?
                <Component {...props} />
            : <Redirect to="/login" />
        )} />
    );
};

Это не может будьте в точности тем, о чем вы просили, но вы получите представление о создании структуры маршрутизации.