问问:如何将公共路线和受保护路线结合起来？(反应路由器)
EN

Stack Overflow用户

提问于 2020-04-16 02:19:19

回答 1查看 155关注 0票数 0

我目前正在进行一个项目，在这个项目中，我必须使用React路由器(在我看来)建立一些复杂的路由。我只是在一周前才开始使用它，此时我感到不知所措，因为我不知道该如何完成这个任务。

我想要的是一个工作框架，在这里我可以实现发出API调用以获取用户数据的实际逻辑，等等。因此产生了虚拟身份验证。

可选信息:我将使用资料UI来设计这个应用程序。

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

1.结构

StartContent (仅在注销时可用)

- `LogIn` (needs to show first)
- `SignUp`
- `ForgotPassword`

MainContent (仅在登录时可用，链接在侧栏中)

- `Overview` (needs to show first)
- `Cashbacks`
- `BankNew`
- `BankExisting`
- `Transactions`
- `Settings`
- `FAQ`
- `LogOutButton`

FooterContent (总是可用的，但只有在选中时，链接才在Footer组件中)

- `Imprint`
- `TermsAndConditions`
- `PrivacyPolicy`

2.用户流

用户需要登录，LogIn组件是显示的第一件事。它是StartContent的子组件，包含LogIn、SignUp和ForgotPassword。用户可以在三个components.
After登录之间导航，StartContent不再可用，Navigation和MainContent将显示出来。Navigation将包含另一个名为SideDrawer的组件，它将打开侧栏，以便用户可以选择和导航。为了简单起见，我改变了React 注销的示例，只有StartContent的内容再次可用，LogIn将首先显示。
--Footer组件必须始终可用，无论是否登录。通过它，用户可以访问FooterContent.

。

3.问题

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

登录后，侧边栏显示，注销按钮正常工作，但一旦我选择一个MainContent的路线，边栏消失，没有内容显示。我该怎么解决这个问题？它自己的侧边栏运行良好。

Footer组件应该始终可用。通过它，您可以访问FooterContent的子级。我如何设置它，使它工作，无论我是登录还是退出？

非常感谢你的阅读和抽出时间来帮助我，我真的很感激！

如果您需要更多的信息或有什么不清楚，请告诉我。我知道很多..。

javascript

reactjs

react-router

回答 1

Stack Overflow用户

发布于 2020-04-16 02:36:17

看来你需要一个完整的路由结构。以下是它的一个想法/例子：

主路由文件

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