Перенаправление из компонента React Context API - PullRequest
Новая
       140

Перенаправление из компонента React Context API

2 голосов
/ 07 мая 2020

Я пытаюсь выполнить перенаправление из своего контекста после неудачного обновления состояния от повара ie. 

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);

Я использую перехватчик withRouter для this.props.history.pu sh ('/'), потому что контекст обертывает маршрутизатор 

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;

Проблема в том, что перенаправление на домашнюю страницу происходит после ошибки, но домашняя страница не отображается .. Я все еще см. страницу панели управления.

Есть идеи, что происходит и как это исправить

1 Ответ

3 голосов
/ 07 мая 2020

Проблема в том, что у вас есть вложенный маршрутизатор, который обертывает ваши маршруты. Вам нужно удалить это, и тогда все будет работать нормально 

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

Когда вы используете вложенный маршрутизатор и пытаетесь перейти от поставщика, история, используемая поставщиком, предоставляется BrowserRouter, и, следовательно, это не 'не может связываться с маршрутами, которые зависят от внутреннего <Router> компонента для истории.

Использование одного маршрутизатора, обертывающего ваши компоненты, решает эту проблему

...