Using withRouter with context react api


so i am working on a personal project and chose to use the context api in react for state management since the app is simple. the problem i have tho is that i need to use to withRouter on in my user-context.js file, to access the history do that i can redirect to the login page if the user in not logged in, this is my user-context file:

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

const UserContext = React.createContext();

class Provider extends Component{
    state = {
            username: ''

        //talk to the server to see if the client is authorized.
        fetch('http://localhost:8080/', {
         headers: {
           authorization: "Bearer "+ localStorage.token
        .then(res => res.json())
        .then(result => {
              user: {
              //if not delete the old token and redirect to login page
            this.props.history.push('/login');//this is not available
        .catch(err => console.log(err));

        return (
            <UserContext.Provider value={{state: this.state}}>

export { 
    withRouter(Provider),//this is where i have a problem
    UserContext }

would really appreciate any help. and if you need any additional info just ask.
thank you

fixed it by separating the UserContext and Provider in two files so i can export default the provider with withRouter export default withRouter(Provider).

apparently you can not use the withRouter when only using export .

1 Like

I know this happened a while back, but I think you could do:

export {
    Provider: withRouter(Provider),