问:如何将公共路线和受保护路线结合起来？(反应路由器)
问:如何将公共路线和受保护路线结合起来？(反应路由器)
提问于 2020-04-16 10:19:19
我目前正在进行一个项目，在这个项目中，我必须使用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的子级。我如何设置它，使它工作，无论我是登录还是退出？
非常感谢你的阅读和抽出时间来帮助我，我真的很感激！
如果您需要更多的信息或有什么不清楚，请告诉我。我知道很多..。
回答 1
Stack Overflow用户
发布于 2020-04-16 10: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" />
)} />
);
};这可能不是您所要求的，但会给您一个关于创建路由结构的想法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61247853
复制相关文章
相似问题
腾讯云开发者
