reactjs - 使用 ApolloClient 时无法访问 this.props
问题描述
我正在使用 apollo-boost 并且我创建了一个 ApolloClient 并且我想在运行突变后进行一些重定向但我无法访问道具
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"));
路由组件
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 } from "react";
class AddProductComponent extends Component {
render() {
console.log(this.props);
return (
<div>
<h1>AddProductComponent</h1>
</div>
);
}
}
export default AddProductComponent;
控制台中的 this.props 显示{}
为了缓解这种情况,我还尝试使用 history 包,它更改了 url,但重定向不起作用
我可以使用状态进行重定向,但我宁愿使用历史道具而不是状态。
对此的任何建议将不胜感激。
解决方案
的Route
render 函数props
作为参数,因为你没有传递它,所以它在组件中不可用
<Route path="/products/new" render={() => <AddProduct />} />
固定的:
<Route path="/products/new" component={AddProduct} />
推荐阅读
- postgresql - 在 Spark Scala 中构建 ETL 逻辑
- javascript - How do I change color and text of a span continuously by clicking on it?
- javascript - JavaScript中带有rest参数的多括号函数
- xml - 如何将子查询添加到现有的主代码
- javascript - 我想在未登录时尝试在登录后访问屏幕时重定向到登录屏幕
- javascript - how to increment a like button in django with ajax?
- excel - 用于将数字除或拆分为最大可能相等部分的 excel 函数
- php - 如何在woo commerce中使用ajax调用创建订单后动态处理付款
- flutter - Dart 中使用隐式子类的高效方式 - OOP 多态性
- java - Micronaut 声明式 http 客户端中的路由参数