[英]React - Functional Component for PrivateRoute, and for in index file
I'm using React Router and Redux for a simple React app (with MaterialUI).我正在将 React Router 和 Redux 用于一个简单的 React 应用程序(使用 MaterialUI)。 I want to make my app with mostly functional components, and i have some difficulties to try to handle it in some case, which are :
我想让我的应用程序包含主要功能组件,并且在某些情况下尝试处理它有一些困难,它们是:
1 - Private Route stateless - I'm using Firebase, and to detect if the user is logged in or not, i store some information in the redux store. 1 - 无状态的私有路由- 我正在使用 Firebase,为了检测用户是否登录,我在 redux 存储中存储了一些信息。 I use these informations to make Private and Public route, as the React Router tutorial.
我使用这些信息来制作私有和公共路由,作为 React Router 教程。 But these components are currently not functional, and i don't know how to proceed to make them functional.
但是这些组件目前不起作用,我不知道如何继续使它们起作用。 Any suggestion ?
有什么建议吗?
index.js索引.js
import React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import logger from "redux-logger";
import { IntlProvider } from "react-intl";
import { locale, messages } from "./i18n/i18n";
import { BrowserRouter as Router, Switch } from "react-router-dom";
import PublicRoute from "./components/PublicRoute";
import PrivateRoute from "./components/PrivateRoute";
import rootReducer from "./reducers/root.reducer";
import firebase from "./firebase";
import AppBar from "./components/AppBar/AppBar";
import Drawer from "./components/Drawer/Drawer";
import Login from "./containers/Login/Login";
import ForgotPassword from "./containers/ForgotPassword/ForgotPassword";
import Dashboard from "./containers/Dashboard/Dashboard";
const store = createStore(rootReducer, applyMiddleware(thunk, logger));
render(
<Provider store={store}>
<IntlProvider locale={locale} messages={messages}>
<Router>
<div>
<AppBar />
<Drawer />
<Switch>
<PublicRoute exact path="/" component={Login} />
<PublicRoute path="/forgotpassword" component={ForgotPassword} />
<PrivateRoute path="/dashboard" component={Dashboard} />
</Switch>
</div>
</Router>
</IntlProvider>
</Provider>,
document.getElementById("root")
);
PrivateRoute.js私有路由.js
import React from "react";
import { connect } from "react-redux";
import { Route, Redirect } from "react-router-dom";
const PrivateRoute = ({ component: Component, user, ...rest }) => (
<Route
{...rest}
render={props =>
user ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: "/",
state: { from: props.location }
}}
/>
)
}
/>
);
const mapStateToProps = (state, props) => ({
user: state.auth.user
});
export default connect(mapStateToProps)(PrivateRoute);
2 - AppBar/Drawer stateless 2 - AppBar/Drawer 无状态
I have the same issue with my appbar/drawer.我的应用栏/抽屉也有同样的问题。 They are currently in my index as posted in the code above.
它们目前在我的索引中,如上面代码中发布的那样。 They should appear only when the user is connected and i need to pass connection state from the redux store.
它们应该只在用户连接时出现并且我需要从 redux 存储中传递连接状态。
I guess both issues have the same solution but i can't find it.我想这两个问题都有相同的解决方案,但我找不到。 Does anyone have one for me ?
有人给我一份吗?
Thanks.谢谢。
The route ( PrivateRoute
)needs a path parameter, just like this:路由(
PrivateRoute
)需要一个路径参数,就像这样:
const PrivateRoute = ({ component: Component, path,user, ...rest }) => (
<Route
path={path}
{...rest}
render={props =>
user ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: "/",
state: { from: props.location }
}}
/>
)
}
/>
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.