reactjs - React 挂钩中的多个提供程序和路由器

Question

我在 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 不起作用。

我希望有人帮我解决这个问题。您可以为我提供如何更有效地将多个上下文和减速器组合到反应钩子中的好方法。

标签： reactjsreact-routerreact-hooksreact-router-dom

Answer 1

[UPD] 当心，问题是在 React Router 5 的时候提出的并且已经给出了答案。对于 v6 ，它不再被允许拥有一些东西，除了<Route>作为一个孩子<Switch>

<Switch>对一级儿童进行操作。它不关心它是<Route>还是<Provider>。因此，您需要调整组件内部的代码移动提供程序或仅使用以下render()变体Route：

<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>

应该可以正常工作