![](/img/trans.png)
[英]Context API - multiple providers + React hooks for multiple pages?
[英]Multiple providers and Router in React hooks
我在 React 鈎子中使用了多個上下文和減速器。
這是我的 App.js 文件
import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Map from "./components/Map";
import Header from "./components/Header";
import Signup from "./components/Auth/Signup";
import Login from "./components/Auth/Login";
import UserList from "./components/User/UserList";
import "mapbox-gl/dist/mapbox-gl.css";
import { ApolloProvider } from "react-apollo";
import { ApolloClient } from "apollo-client";
import { WebSocketLink } from "apollo-link-ws";
import { InMemoryCache } from "apollo-cache-inmemory";
import { default as keysConfig } from "./keys.config";
import AuthProvider from "./providers/authProvider";
import withRoot from "./providers/withRoot";
import PageContent from "./pages/pageContent";
import ProtectedRoute from "./routePermissions/ProtectedRoute";
import AdminRoute from "./routePermissions/AdminRoute";
import PinProvider from "./providers/pinProvider";
import UserProvider from "./providers/userProvider";
const wsLink = new WebSocketLink({
uri: `${keysConfig.WssBaseUrl}/graphql`,
options: {
reconnect: true
}
});
const client = new ApolloClient({
link: wsLink,
cache: new InMemoryCache()
});
const App = () => {
return (
<Router>
<ApolloProvider client={client}>
<AuthProvider>
<PageContent>
<Header />
<Switch>
<PinProvider>
<ProtectedRoute exact path="/" component={Map} />
</PinProvider>
<Route exact path="/login" component={Login} />
<Route exact path="/signup" component={Signup} />
<UserProvider>
<AdminRoute exact path="/userlist" component={UserList} />
</UserProvider>
</Switch>
</PageContent>
</AuthProvider>
</ApolloProvider>
</Router>
);
};
export default withRoot(App);
我正在使用多個上下文和減速器。 它讓我使用多個提供程序。 但我想將提供者用於特定路線。
當我像代碼片段一樣使用 Route 時,ProtectedRoute 不起作用。
我希望有人幫助我解決這個問題。 您可以為我提供如何更有效地在反應鈎子中組合多個上下文和減速器的好方法。
<Switch>
作用於一級子級。 它不在乎它是<Route>
還是<Provider>
。 因此,您需要在組件內調整代碼移動提供程序,或者僅使用Route
render()
變體:
<Switch>
<ProtectedRoute
exact
path="/"
render={(...params) =>
<PinProvider><Map {...params} /></PinProvider>
}
/>
<Route exact path="/login" component={Login} />
<Route exact path="/signup" component={Signup} />
<AdminRoute
exact
path="/userlist"
render={(params) =>
<UserProvider><UserList {...params} /></UserProvider>
}
/>
</Switch>
應該工作正常
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.