Reactjs 正在尝试使用路由器与我的提供程序类一起工作

使用上下文API在React中处理注册路由（后端Mongodb已经设置好，工作正常）。登录成功后，我想重定向url。它工作得很好，直到我尝试将export设置为使用

with router

来使用

this.props.history

provider类可以正常工作，但当我以这种方式导出时，

this.props.history

未定义：

导出类提供程序扩展组件{

当我尝试用下面的代码导出它时，它会抛出一个错误-请参阅下面的错误

提供者类

import React，{Component}来自'React'；
从“axios”导入axios；
从“react router”导入{withRouter}；
const AuthContext=React.createContext（）；
类提供程序扩展组件{
状态={
名字：空，
姓氏：空，
电子邮件地址：空，
密码：null，
签名：错，
};
注销=（）=>{
这个.setState（{
名字：空，
签名人：错
});
};
用户数据=（事件）=>{
这是我的国家({
[event.target.name]：event.target.value
});
};
登录=（事件）=>{
event.preventDefault（）；
axios.get(`http://localhost:5000/api/users`, {
认证：{
用户名：this.state.emailAddress，
密码：this.state.password
}
})。然后（res=>{
这是我的国家({
firstName:res.data.firstName，
签名人：是的
})
this.props.history.push（“/”）；
console.log（'successful'）
}).catch（错误=>{
console.log（'unsuccessful'）
console.log（错误）
});
}
render（）{
返回(
{this.props.children}
)
}
}
使用路由器导出默认值（提供程序）
export const Consumer=AuthContext.Consumer

APP.JS

导出默认类应用程序扩展组件{
render（）{
返回(
}/>   
);
};
};

这是我在上面代码中遇到的浏览器错误：

尝试导入错误：“提供程序”未从导出。/Components/Context'

如果我删除

export default with router（Provider）

并使用这一行导出

export class Provider extensed Component

，它工作正常！但我需要以某种方式访问这个道具历史

---

有没有重定向url的建议？或者如何使用withRouter正确导出我的提供程序类？非常感谢您在

app.js

中使用另一个名称导入

Provider

，并尝试查看发生了什么情况如何在

app.js中导入Provider

？非常感谢你们为我指明了方向。我是以{Provider}的身份导入的，我去掉了花括号，现在它可以正常工作了。在你的

app.js

中，用另一个名字导入

Provider

，看看发生了什么事情。你如何在

app.js

中导入Provider？非常感谢你们给我指明了方向。我是作为{Provider}导入的，我去掉了花括号，现在它可以正常工作了。

import React, { Component } from 'react';
import axios from 'axios';
import {withRouter} from 'react-router';

const AuthContext = React.createContext();

class Provider extends Component {

  state = {
    firstName: null,
    lastName:null,
    emailAddress: null,
    password: null,
    signedIn: false,
  };

  logOut = () => {
    this.setState({ 
      firstName: null,
      signedIn: false
    });
  };

  userData = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };

  logIn = (event) => {
    event.preventDefault();
    axios.get(`http://localhost:5000/api/users`, {
      auth: {
        username: this.state.emailAddress,
        password: this.state.password
      }
    }).then(res => {
      this.setState({
        firstName: res.data.firstName,
        signedIn: true
      })
      this.props.history.push("/");
      console.log('successful')
    }).catch(err => {
      console.log('unsuccessful')
      console.log(err)
    });
  }

  render(){
    return (
      <AuthContext.Provider value = {{
        firstName: this.state.firstName,
        signedIn: this.state.signedIn,
        actions: {
          signedIn: this.state.signedIn,
          logIn: this.logIn,
          logOut: this.logOut,
          userData: this.userData
        }
      }}>
        {this.props.children}
      </AuthContext.Provider>

    )
  }
}
export default withRouter(Provider)
export const Consumer = AuthContext.Consumer

export default class App extends Component {
  render() {
    return (
      <BrowserRouter>
      <Provider>
          <Header />
          <Switch>
            <Route exact path='/courses' render={() =>  <Redirect to='/' />}/>   
            <Route exact path='/' component={Courses} />
            <Route path='/courses/create' component={CreateCourse} />
            <Route exact path='/courses/:id' component={CourseDetail} />
            <Route path='/courses/:id/update' component={UpdateCourse} />
            <Route path='/signin' component={UserSignIn} />
            <Route path='/signup' component={UserSignUp} />
            <Route component = {PageNotFound} />
          </Switch>
      </Provider>
      </BrowserRouter>
    );
  };
};