CODEWITHSUNDEEP
reactjsreact-nativereact-routerreact-context
Matt Gimel
Matt Gimel

Reputation: 23

Redirect from React's Context API component

I am trying to redirect from my context following a failed update of the state from the a cookie.

import React, { createContext, Component } from 'react';
import { withRouter } from "react-router-dom";
import Cookies from 'universal-cookie';

export const MyContext = createContext();

const cookies = new Cookies();

class MyProvider extends Component {
  componentDidMount() {
    this.setStateFromCookie();
  }

  setStateFromCookie = () => {
    try {
      this.setState({ data: cookies.get('my-cookie')['data'] });
    } catch(error) {
      console.log(error);
      this.props.history.push('/');
    }
    return 
  };

  render() {
    return (
      <MyContext.Provider value={{...this.state}}>
        {this.props.children}
      </MyContext.Provider>
    );
  }
}

export default withRouter(MyProvider);

I am using a withRouter hook to this.props.history.push('/'), becuase the context is wrapping the router

class MyApp extends Component {
  render() {
    return (
      <BrowserRouter>
        <MyProvider>
          <div className="MyApp">
            <Router>
              <Route exact path='/' component={Index} />
              <Route exact path='/dashboard' component={Dashboard} />
            </Router>
          </div>
        </MyProvider>
      </BrowserRouter>
    );
  }
}
export default MyApp;

The problem is that the redirect to the home page following the error, but the home page isn't rendering.. I still see the dashboard page.

Any idea what is going on and how to fix this

Upvotes: 2

Views: 1007

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281834

The issue is that you have a nested Router wrapping your Routes. You need to remove that and then everything will work fine

  <BrowserRouter>
    <MyProvider>
      <div className="MyApp">
          <Route exact path='/' component={Index} />
          <Route exact path='/dashboard' component={Dashboard} />
      </div>
    </MyProvider>
  </BrowserRouter>

When you use a nested Router, and try to navigate from Provider, the history used by Provider is being provided by BrowserRouter and hence it isn't able to communicate to the Routes whcih are dependent on the inner <Router> component for history.

Using a single router wrapping your components solves this issue

Upvotes: 3

Related Questions