1。结构

Question

我目前正在一个项目中，我必须使用反应路由器建立一些（我认为）复杂的路由。我只是在一周前才开始使用它，但由于不确定如何完成此操作，因此我不知所措。

我希望拥有一个可以使用的工作框架，在这里我可以实现进行API调用以获取用户数据等的实际逻辑。因此是虚拟身份验证。

可选信息：我将使用材料界面设计应用程序。

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

1。结构

StartContent（仅在注销后可用）
- LogIn（需要首先显示）
- SignUp
- ForgotPassword
MainContent（仅在登录时可用，链接在侧边栏中）
- Overview（需要首先显示）
- Cashbacks
- BankNew
- BankExisting
- Transactions
- Settings
- FAQ
- LogOutButton
FooterContent（始终可用，但只有在选中后，链接才会在Footer组件内）
- Imprint
- TermsAndConditions
- PrivacyPolicy

2。用户流

用户需要登录，首先显示LogIn组件。它是StartContent的子组件，它包含LogIn，SignUp和ForgotPassword。用户能够在这三个组件之间导航。
登录后，StartContent不再可用，并且将显示Navigation和MainContent。 Navigation将包含另一个名为SideDrawer的组件，它将打开侧边栏，以便用户可以选择和导航。为简单起见，我从反应路由器中更改了示例。
注销后，仅StartContent的内容将再次可用，而LogIn将首先显示。
Footer组件必须始终可用，无论是否登录。通过它，用户可以访问FooterContent。

3。问题

目前，我只能通过单击相应的链接来访问PrivateRoute。如果未登录，如何设置路由以首先显示LogIn？我不想单击此链接到达那里，并希望摆脱它。

登录后，侧边栏显示出来，并且注销按钮可以正常工作，但是，一旦我选择MainContent的一条路线，侧边栏就会消失并且没有内容显示。我该如何解决？单靠边栏可以正常工作。

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" />
        )} />
    );
};

这可能与您要求的不完全相同，但是会为您提供有关创建路由结构的想法。

问：如何设置公共路线和受保护路线的组合？（反应路由器）

1。结构

2。用户流

3。问题

1 个答案:

问：如何设置公共路线和受保护路线的组合？ （反应路由器）

1。结构

2。用户流

3。问题

1 个答案:

问：如何设置公共路线和受保护路线的组合？（反应路由器）