Reactjs 使用Apollo客户端时无法访问此.props

我正在使用apollo boost，我创建了一个apollo客户端，我想在运行变异后进行一些重定向，但我无法访问道具

index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import { ApolloProvider } from "react-apollo";
import ApolloClient from "apollo-boost";

import "./bootstrap";
import Routes from "./RoutesComponent";

const client = new ApolloClient({
  uri: "http://localhost:4000/graphql"
});

const Root = () => {
  return (
    <ApolloProvider client={client}>
      <BrowserRouter>
        <Routes />
      </BrowserRouter>
    </ApolloProvider>
  );
};

ReactDOM.render(<Root />, document.querySelector("#root"));

从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{BrowserRouter}；
从“react apollo”导入{ApolloProvider}；
从“apollo boost”导入apollo客户端；
导入“/bootstrap”；
从“/RouteComponent”导入路由；
const客户端=新客户端({
uri:“http://localhost:4000/graphql"
});
常量根=（）=>{
返回(
);
};
ReactDOM.render（，document.querySelector（“#root”）；

路由组件

import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";

import Register from "./authenticate/register/RegisterComponent";
import Login from "./authenticate/login/LoginComponent";
import Product from "./customers/product/ProductComponent";
import AddProduct from "./customers/add-product/AddProductComponent";
import Products from "./customers/products/ProductsComponent";
import AdminProduct from "./admin/product/ProductComponent";
import AdminProducts from "./admin/products/ProductsComponent";

class RoutesComponent extends Component {
  render() {
    return (
      <Switch>
        <Route path="/products/new" render={() => <AddProduct />} />
      </Switch>
    );
  }
}
export default RoutesComponent;

import React，{Component}来自“React”；
从“react router dom”导入{Route，Switch}；
从“/authenticate/Register/RegisterComponent”导入寄存器；
从“/authenticate/Login/LoginComponent”导入登录名；
从“/customers/Product/ProductComponent”导入产品；
从“/customers/add product/AddProductComponent”导入AddProduct；
从“/customers/Products/ProductsComponent”导入产品；
从“/admin/product/ProductComponent”导入AdminProduct；
从“/admin/products/ProductsComponent”导入AdminProducts；
类RouteComponent扩展了组件{
render（）{
返回(
} />
);
}
}
导出默认路由组件；

AddProductComponent

import React, { Component } from "react";

class AddProductComponent extends Component {
  render() {
    console.log(this.props);
    return (
      <div>
        <h1>AddProductComponent</h1>
      </div>
    );
  }
}
export default AddProductComponent;

import React，{Component}来自“React”；
类AddProductComponent扩展了组件{
render（）{
console.log（this.props）；
返回(
AddProductComponent
);
}
}
导出默认的AddProductComponent；

控制台中的this.props显示

{}

为了缓解这种情况，我还尝试使用历史记录包，它会更改url，但重定向不起作用

我可以使用state进行重定向，但我更愿意使用history道具而不是state

---

如果您对此有任何建议，我们将不胜感激。

路由的渲染函数将

道具

作为参数，因为您没有传递它，所以它在组件中不可用

<Route path="/products/new" render={() => <AddProduct />} />

}/>

固定的：

<Route path="/products/new" component={AddProduct} />

路由
的渲染函数将
道具
作为参数，因为您没有传递它，所以它在组件中不可用

<Route path="/products/new" render={() => <AddProduct />} />

}/>

固定的：

<Route path="/products/new" component={AddProduct} />


这个问题专门针对react路由器dom，实际上与react apollo无关。你可以去掉所有的阿波罗密码，你仍然会遇到同样的问题。这个问题是针对react路由器dom的，实际上与react apollo无关。你可以去掉所有的阿波罗密码，你仍然会有同样的问题。